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s 围绕 实例 进行 讲解 ， 每 一 节 都 可 以 让 读者 掌握 一 种 实用 技术 
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内 容 简 介 


本 书 基 于 理论 知识 与 开发 实践 相 结合 的 思想 , 精 选 当前 简单 、 实 用 和 流行 的 百 余 个 JavaScript 代码 实例 ， 
帮助 读者 学 习 掌 握 JavaScript 脚本 语言 。 全 书 内 容 翔 实 、 重 点 突出 、 通 俗 易 懂 ， 涵 盖 了 JavaScript 前 端 开 
发 的 方方面面 。 

全 书 共 分 为 13 章 ， 包 括 JavaScript 前 端 设计 、 调 试 和 开发 的 一 些 必 备 知识 ， 表 单 处 理 、DOM 控制 、 控 
件 特 效 、 日 期 时 间 、 网 页 特效 、DIV+CSS、Ajax 应 用 等 方面 的 应 用 实例 , 还 特别 增加 了 对 当下 非常 流行 的 React 
FI Vue. js 框架 的 介绍 。 本 书 的 全 部 代码 实例 均 是 对 JavaScript 技术 最 具 代 表 性 的 实践 应 用 ， 可 以 帮助 读者 
深入 学 习 JavaScript 的 开发 技巧 。 

本 书 是 学 习 掌 握 JavaScript 技术 非常 好 的 图 书 ， 既 适合 JavaScript, Vue, React 前 端 初学 者 阅读 ， 也 
适合 从 事前 端 网 页 设计 以 及 需要 学 习 前 端 技术 的 后 端 开发 工程 师 阅读 ， 同 时 还 可 作为 高 等 院 校 和 培训 学 校 相 
关 专 业 的 教材 。 相 信 本 书 丰 富 的 内 容 和 大 量 的 实例 能 够 帮助 初学 者 快速 步 入 Web 前 端 开 发 的 捷径 ， 并 衷心 地 
希望 每 一 名 前 端 爱好 者 都 可 以 成 为 有 代码 实践 和 技术 深度 的 JavaScript 高 手 。 
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读 懂 本 书 
JavaScript 无 处 不 在 


二 十 多 年 前 , 布 兰 登 * 艾 奇 (Brendan Eich) X Netscape 浏览 器 草草 地 设计 出 网 页 脚本 语言 (最 
早 的 JavaScript 原型 ) 的 时 候 ， 可 能 根本 不 会 预料 到 如 今 JavaScript 会 成 为 Web 开发 领域 的 第 一 编 
程 语言 。 

在 权威 的 编程 语言 排行 榜 (TIOBE ) 中 ，JavaScript 多 年 来 一 直 稳 居 在 前 几 名 之 列 。 尽 管 自 
JavaScript 诞生 之 日 起 ， 融 伴随 着 诸如 “语法 不 够 严谨 ”“ 逻 辑 不 够 清晰 ”“ 代 码 管 理 混 乱 ” 这 类 
的 批评 之 声 ， 但 这 并 没有 阻止 广大 程序 员 对 其 的 喜爱 。 

JavaScript 之 所 以 能 够 得 到 广泛 的 欢迎 和 普及 ， 与 其 简单 易学 、 使 用 灵活 ， 跨 平台 兼容 的 这 些 
特性 密 不 可 分 。 新 手 可 以 很 快 地 擎 握 一 些 基 本 技 马 并 实践 在 网 页 开发 中 , 高 手 可 以 凭借 扎实 的 基本 
功 、 构 建 出 逻辑 复杂 且 功 能 强大 的 Web 应 用 。 

WS, JavaScript 文 持 在 绝 大 多 数 的 平台 上 进行 开发 : PC 客户 器 的 应 用 程序 ，Web 服务 器 端 
的 业务 逻辑 ， 黄 入 式 必 片 设 计 ， 物 联网 设备 研发 等 ， 均 是 JavaScript 可 以 发 挥 魔力 的 舞台 。 军 不 仿 
张 地 讲 ， 今 天 的 JavaScript 几乎 是 无 处 不 在 。 


JavaScript 技术 特点 


JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 相对 安全 性 的 脚本 语 
言 。JavaScript 广泛 应 用 于 互联 网 的 Web 开发 ， 通 过 为 HTML 网 页 添加 动态 啊 应 功能 来 提高 用 户 
交互 体验 。 

JavaScript 的 设计 目标 ， 就 是 一 种 基于 原型 对 象 、 屁 类 型 、 事 件 驱 动 、 跨 平台 兼容 的 解释 性 动 
态 脚 本 语言 。 同 时 ， 由 于 JavaScript 具有 很 强 的 扩展 性 ， 因 此 可 以 基于 JavaScript 原生 语法 开发 出 
功能 更 为 强大 的 类 库 或 框架 。 

当然 ， 也 正 是 由 于 JavaScript 的 灵活 性 太 强 ， 各 大 浏览 器 厂商 设计 的 版 本 莱 容 性 不 好 。 不 过 ， 
这 种 情况 随 着 EMCA TC39 委员 会 推出 的 标准 化 ECMAScript 脚本 语言 得 到 了 很 好 的 改善 相信 未 
来 JavaScript 脚本 语言 的 兼容 性 会 越 来 越 好 。 


JavaScript 扩展 类 库 和 框架 


JavaScript 之 所 以 无 处 不 在 、 广 受 欢 迎 ， 相 信和 与 其 庞大 的 扩展 类 库 和 框 染 群 不 无 关系 。 例 如 ， 
ProtoType、 jQuery, jQuery Mobile, AngularJS, React, Vue.js 等 , 这 些 耳 熟 能 详 的 名 字 都 是 JavaScript 
扩展 类 库 和 框架 的 优秀 代表 。 

以 上 这 些 优秀 的 JavaScript 扩展 类 库 和 框架 不 单单 是 将 核心 功能 进行 抽象 、 集 成 和 扩展 ， 而 是 
在 设计 模式 、 功 能 架构 、 性 能 优化 等 方面 做 足 了 功夫 ， 带 给 了 设计 人 员 无 与 伦比 的 编程 体验 以 及 代 
人 码 性 能 和 运行 效率 的 显 普 提升 。 


LI 


本 书 真 的 适合 你 吗 


本 书 大 量 的 基础 代码 实例 可 以 帮助 读者 快速 掌握 JavaScript 的 编程 技巧 ， 并 应 用 到 实践 开发 之 
中 。 尤 其 是 关于 JavaScript 框 染 的 提高 内 容 中 ， 通 过 对 目前 流行 的 React 和 Vue.js 框架 的 介绍 ， 玫 
助 读者 去 了 解 前 端 Web 技术 的 前 沿 方 同 。 无论 是 基础 内 容 或 提高 内 容 ， 相信 读者 都 可 以 从 中 获 荔 。 


本 书 涉及 的 主要 软件 工具 、 技 术 或 框架 


Apache HTTP Mozilla Firefox Dreamweaver CS6 UltraEdit 

WebStorm Sublime Text Notepad EditPlus 

HTML MIME HTTP React 

HTMLS JavaScript ECMAScript Vue.js 

CSS3 AJAX RegExp JSON 
本 书 特点 


d) 本 书 完全 是 从 简单 、 通 用 的 JavaScript 代码 实例 出 发 ， 抛 开 枯 煤 的 纯 理论 知识 介绍 ， 通 
过 实例 讲解 的 方式 帮助 读者 学 习 JavaScript 脚本 语言 设计 。 

(2) 本 书 内 容 涵盖 JavaScript 所 涉及 的 、 绝 大 部 分 的 前 问 开 友 知 识 ， 将 这 些 内 容 整 合 到 一 起 
可 以 系统 地 了 解 掌握 这 门 语言 的 全 貌 ， 为 介入 大 型 Web 项 目的 开发 做 了 很 好 的 铺垫 。 

G) 本 书 对 于 实例 中 的 知识 难 点 做 出 了 详细 的 分 析 ， 能 够 帮助 读者 有 针对 性 地 提高 JavaScript 
编程 开发 技巧 。 

(4) 本 书 在 知识 点 上 按照 类 别 进行 合理 的 划分 ， 全 部 的 代码 实例 都 是 独立 的 ， 读 者 可 以 从 头 
开始 阅读 ， 也 可 以 从 中 间 开 始 阅读 ， 不 会 影 啊 学 习 进度 。 

(50 本 书 代码 章 循 重 构 原 理 ， 避 免 代 码 污染 ， 雁 心 布 望 读者 能 写 出 优秀 、 简 洁 、 可 维护 的 代码 。 


代码 下 载 
本 书 代 码 下 载 地 址 (注意 数字 与 字母 大 小 写 ) : https://share.weiyun.com/5K9SHun. 
如 果 下 载 有 问题 ， 请 联系 booksaga@163.com， 邮 件 主题 为 “JavaScriptHVue+React”。 
本 书 读者 
JavaScript、Vue、React 前 端 开发 初学 者 
从 事前 端 网 页 设计 的 开发 工程 师 
需要 学 习 前 端 技术 的 后 端 开发 工程 师 
高 等 院 校 和 培训 学 校 相关 专业 的 师 生 


本 书 第 1~11 章 由 平顶山 学 院 的 郑 均 光 编写， 第 12-13 TE FH EFEK o 
天 于 封面 照片 
封面 照片 由 蜂 乌 网 摄影 家 ptwkzj 先生 友情 提供 ， 在 此 表示 衷心 感谢 。 
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本 书 将 用 新 甘 的 视角 去 认识 JavaScript, 通过 简单 流行 的 代码 实例 深度 阐述 JavaScript 的 特性 ， 
尽量 利用 IT 世界 里 有 意思 的 东西 来 激发 读者 的 学 习 兴 趣 。 本 章 将 概括 性 地 介绍 JavaScript 的 书写 
方式 、 调 试 方式 和 开发 工具 。 


1.1 HTML 中 书写 JavaScript 的 几 种 方式 


编写 JavaScript 代码 其 实 无 须 特殊 软件 ， 一 个 普通 的 文本 编辑 器 (如 记事 本 ) 和 一 个 Web 浏 
Jas LAE J o 用 JavaScript 编写 的 代码 需要 放 在 HTML. 文档 中 才能 被 浏 帘 器 执行 有 以 下 两 种 方 
式 可 以 做 到 这 一 点 。 

第 一 种 方式 是 将 JavaScript 代码 放 到 文档 <head> 标 签 的 <scrip 人 标签 中 : 


01 <!DOCTYPE html» 

02 «html» 

03 «head» 

04 «title»hello world«/title» 
05 «script» 

06 alert('hello world!'); 
07 «/script» 

08  «/head» 


09 «body» 
10 </body> 
IT «/htmi» 


将 上 面 的 代码 保存 到 HTML 文件 中 (在 记事 本 中 编写 ， 然 后 另存 为 扩展 名 为 html 的 文件 ) ， 
用 任意 浏览 器 打开 ， 就 可 以 看 到 一 个 弹出 对 话 框 。 

第 二 种 方式 是 把 JavaScript 代码 存 为 一 个 扩展 名 为 js 的 独立 文件 。 以 前 的 做 法 是 在 文档 <head> 
里 用 <scrip 亿 标签 的 src 属性 来 指 回 该 文件 : 


01 &«!DOCTYPE html» 

02 «html» 

03 «head» 

04 «title»hello world«/title» 

05 «script src-"helloworld.js"»«/script» 
06 </head> 

07 <body> 
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08 | </body> 
09 </html> 


目前 业界 推荐 的 做 法 是 把 <script> 放 到 HTML 文档 最 后 ，</body> 标 签 之 前 (第 08 行 和 第 09 
行 之 间 ) 。 这 样 做 的 目的 是 ， 使 浏览 器 更 快 地 加 载 页 面 并 展示 给 用 户 ， 从 而 增强 用 户 体验 。 


1.2 选择 开发 工具 


近 几 年 JavaScript 的 开发 工具 也 得 到 了 连 动 发 展 , 大 小 工具 琳琅 满目 , 难 易 程度 也 是 不 尽 相 同 。 
比如 重量 级 的 集成 开发 平台 ， 包 括 Adobe Dreamweaver. Visual Studio 系列 和 jetBrains WebStorm 
系列 ， 有 具有 简单 易学 、 适 应 性 强 、 功 能 完善 等 特点 ， 深 受 三 大 开发 者 的 喜爱 。 一 些 轻 量 级 的 代码 编 
ias LH. CEditPlus 和 Sublime Text〉 也 非常 受 专业 人 士 欢迎 ， 这 些 编辑 器 看 似 功能 简单 实则 扩展 
性 很 强大 ， 初 学 者 虽 不 易 掌 握 ， 但 熟练 运用 后 一 定 会 让 设计 人 员 爱 不 释 手 。 这 里 简单 介绍 三 种 
JavaScript 开发 工具 。 


1. Adobe Dreamweaver 
这 就 是 曾经 被 誉 为 “网 页 三 剑客 ”之 一 的 Dreamweaver, 备 受 广大 网 页 设计 和 开发 人 员 的 喜爱 ， 
历史 非常 悠 和 人 入。 它 的 运行 效果 如 图 1.1 所 示 。 


DW vP 80 SEV) EA) M) 格式 (0) AHO WAO SOW RERO 


:最近 的 项 目 新 建 

chl4/ch14-js-forrn-clements binl HIML EJ C36 HAHAE 
chi4/ck14-js-forra htm ColdFusion — 
chl4/ck14-js-window.btzil pH E bod RIS 
projects.test js C55 四 | Business Catalyst 创作 


node. js[B do/index. js T Javascript z 
了 | C55 i: 
1515.1htnd -OXML ilgai | CSS ER 


15.15.5.htrzl Xt atea.. (ig) | jQuery Motile B4 


1515.3 html EB Dreamweaver hA. 
15.offline hrm! gg Business Catalyst 让 点 . 
D Es. 


) VV —Á 
| | HAE hia Adobe TV 


图 1.1 Adobe Dreamweaver CS6 


Dreamweaver CS6 版 本 文 持 CSS 3. HTML 5， 并 集成 了 jQuery 代码 提示 功能 ， 是 网 页 开 友 人 
员 开 发 大 型 项 目 或 长 期 使 用 的 必 备 工具 。 


2. jetBrains WebStorm 


jetBrains WebStorm 是 JavaScript RFE FA Pe ER, Dipen B.E fa] P 2 7:8] 
一 球 开 发 工具 。jetBrains 公司 是 近年 来 最 成 功 的 一 家 专业 软件 平台 开发 商 , 推出 了 多 系列 专业 性 非 


第 1 章 JavaScript 环境 搭建 


常 强 的 开发 工具 ,在 用 户 体验 方面 十 分 下 功夫 。 WebStorm 开发 平台 就 是 专门 针对 前 端 开 发 (HTML、 
JavaScript、CSS) 而 设计 的 。 图 1.2 就 是 开发 平台 界面 的 演示 效果 。 


js-tctal-yermples - |EVWebstormprolectyus-tct-semple] - -chOThch01--debughtml - WebStorm 2017,24 
Dile Ede View Nevigate Code Refactor Run Jools VCS Window Help 
]s-total-samples ch01 > BB ch01-js-debug.htrnl 


fS Project Files 


i 


v kK-tota- mplos E 
v chon 


a 1; Project 


*1 Ji Structure 


ch 
ch 好 
ch 
cho? 
chie 
choa 
h10 
ch 
ch12 
中 1 
Iib External libraries 


I+ b Fivorites 


E temna — "Es TODO 


m 


3. Sublime Text 


ins chòl -E-debbug.htmi 


*1Idoctype html» 
*html langz"en"» 
<head > 
«meta http-equiv=" Content-Type" content-"text/html; charset-utf-8" /> 
«meta http-equivz"Content-Language" contentz"zh-cn" /> 
<meta name-"author" content-"king"-^ 
<meta namez"revised" content-z"king,01/18/2619"» 
*meta name-"generator" content-"WebStorm 29017.2,.4"» 
«meta name-"description" content-"JavaScript Total SanplesP» 
«meta namez"keywords" contentz"JavaScript,ECMAScript"» 
«link rel="stylesheet" type="text/css" href-z"css/style.css'"» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 


“header> 
<mav>]avaScr1pt 基础 - 脚本 调试 </nav> 

C /header» 

«hr»? 

«div id-2"id-div-count"» 

</div> 
</body> 
<script type="text/javascript" src="js/ch0l-js-debug.js"></script> 
< ihtml> 


html hesd mets 


1.2 jetBrains WebStorm 


1263 LF: 


! trent Log 


b 


Sublime Text 是 JavaScript 开发 环境 IDE P HKR LR 1.3 的 且 对 开发 文 持 非 钊 民 好 的 
一 鞭 文 本 编辑 器 ， 人 简洁 、 强 大 、 高 效 。Sublime 做 了 很 多 用 户 体验 方面 的 改进 和 文 持 ， 对 审美 有 要 


求 的 读者 可 果断 入 手 。 


目前 的 主流 浏览 器 均 文 持 直 接 调 试 JavaScript 代码 , AT L ILAJ Chrome 和 Firefox 133 2] 


右 为 例 进行 介绍 。 


FA2-6.html - - Sublime Text (UNREGISTERED) co | © m 


Fille Edit Selection. Find View Goto Tools Project Preferences Help 


4» 2-5.html 


DOCTYPE html 
html 

head 

title> 测 试 </title> 
</head 

body 


input type-" 
input type-" 
input type-" V 
input type-"rz "sex" va "1" checked-"checked" />AB 
select name-"" id-"age" 

option value 

«option valuez"1' 

option value-"2" 

«option valuez"3"»24-30«j 

option value 

option value-"5" 
/select»«br / 


in 


C Line21 Column 68 Tab Size: 4 JavaScript 


1.3 Sublime Text 3 


1.3 JavaScript 的 调试 


WA 
UU 
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[x d] Elements Console Network Performance Memory Application 
Network | Filesystem » , js- j PI 
O top 


EX *Mreated b 
Y C5 file// m z 
v_id_div_count = document.getElementBy} 
var strline; 
g| for(var i-1; ic10; i+) { 
strline - "i-" + i.toString() + "«br»"; 
Bil js-debugjs i console. log(strLine); . 
> : v id div count.innerHTML += strline; 


' KING on 2017/7/18. 


js 源码 窗口 


JavaScript RE x 中 


Q © localhost:63342/js-t... 


JavaScript 基础 - 脚本 调试 


4 {} Line 1, Column 1 


. a 
* Console 
[n 9 top Filte Default levels V * Group simila 


is4Acbr» 

i-Sébr? 

i-6«br» 

i=7<bry 

i-8ibr? 

i=9<br> 
》 


1.4 使 用 Chrome 浏览 器 打开 1.5 打开 Chrome 浏览 器 js 调试 功能 


可 以 在 JavaScript 代码 的 第 08 行 添加 断 点 ， 单 击 行 号 就 可 以 ， 如 图 1.6 所 示 。 这 样 每 次 程序 
执行 到 该 行 时 中 断 ， 如 图 1.7 所 示 。 将 鼠标 放 在 茶 个 变量 上 ， 惑 会 显示 当前 变量 的 值 ， 然 后 通过 右 
侧 的 调试 控制 条 可 以 控制 是 否 继续 执行 下 一 行 。 


I WButf$ERhtmÓ —|js-debugjs X [[« JExtéERhtm! |js-debug.js X | A7? 0 


ng 1|/** -| @ Paused on[breakpoint 
* Created by KING on 2017/7/18. 2| * Created by KING on 2017/7/18. 
d 3| */ Y Watch x doe al 
1 var v id div count = document.getElement 4|var v id div count = document.getElementById("ic-div-cou m 调 戈 控制 条 ul 
5|var strLine; 5|var strLine; ^ atch expressions 
6| for(var iz1; i«10; i++) ( 6 for(var i= 1; i< 10; i+ +) { - 
strline = "i-" + i.toString() + "«br - z V Call Stack 


B console.DP1log(strLline); 8 S-HH^ —— P! GTI log TAN + (anonymous) 


v id div count.innerHTML += strLine; : v id div count.innerHTMLA*- strLine; 
Y Scope 


> Global 
Y Breakpoints 
Z) js-debug.js:8 


在 此 处 中 断 console.log(strLine); 
> XHR/fetch Breakpoints 


> DOM Breakpoints 
> Global Listeners 


> Event Listener Breakpoints 


3 


() Line 8, Column 1 () Line 8, Column 5 


1.6 为 js 脚本 代码 设置 断 点 L7. 调试 脚本 代码 
2. 使 用 Firefox 调试 
下 面 使 用 Firefox 浏览 器 运行 测试 代码 所 在 的 HTML 网 页 ， 如 图 1.8 所 示 。 打 开 Firefox 浏览 


器 的 调试 功能 面板 ， 如 图 1.9 所 示 。 
下 面 在 图 1.9 的 js 源码 窗口 中 为 【代码 1-2】 中 的 第 05 行 脚本 语句 设置 断 点 ， 如 图 1.10 所 示 。 
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© 开发 者 工具 JavaScript 全 程 实例 - http;//l... 
Q Oaa Mic. MEL 


E] 


ch01-js-debug.js X 


/** 
* Created by KING on 2019/01/18. 
g. 
var v id div count = document.getElementById("id-div-count"); 
var strLine; 
for(var i=1; i«10; i++) ( 


文件 昌 dE) EE) PHO Bg) ISM 
Eg Javascript 全 程 实例 
> CQ |© local 5t » 


strLine s "is" + i.toString() + "«br»"; 
console.log(strLine); 
v id div count.innerHTML += strLine; 


1 
2 
3 
- 
5 
6 
7 
8 
9 
e 


JavaScript 基础 - 脚本 调试 
js 源码 窗口 


ñ yY iA 器 ] 持续 日 志 X 
| 调试 信息 输出 窗口 


1.8 使 用 Firefox 浏览 器 调试 js 脚本 1.9 打开 Firefox 浏览 器 js 调试 功能 面板 


然后 ， 按 “F5” 功 能 键 重新 刷新 页 面 ， 再 按 步 进 “F11” 功 能 键 来 调试 执行 js 代码 ， 页 面 效 果 
如 图 1.11 和 图 1.12 所 示 。 在 图 1.11 和 1.12 中 可 以 看 到 ， 每 次 执行 到 【代码 1-2】 中 第 05 行 脚本 
语句 设置 断 点 处 时 ，js 代码 均 会 被 中 断 ， 然 后 在 日 志 窗 口中 输出 调试 信息 (变量 “i” 计 数 器 的 数 
值 ) 。 以 上 就 是 JavaScript 脚本 语言 开发 与 调试 的 基本 过 程 方法 。 

错开 发 者 工具 JavaScript 全 程 实例 - http://loc... © 开发 者 工具 - JavaScript 全 程 实例 - http://loc.. 
器 查看 器 Oese DINE » - Gass Dese DES » 


ch01-js-debug.js X ch01-js-debug.js X 
224 /** 
* Created by KING on 2019/01/18. * Created by KING on 2019/01/18. 
.J/ */ 
var v id div count = document.gettElementById("id-div-count"); var v id div count = document.gettElementById("id-div-count"); 
var strLine; var strLine; 
& for(var i=1; i<10; i++) ( for(var iz1; i«10; i+) ( 
7 strLine = "is" + i.tostring() + "«br»"; strLine = "iz" + i.toString() + "<br>"; 


ramena Lant etsi ine): 29 ne 
= 3 eo . i 


O BED PHTML += strLine; v id div count.innerHTML += strLine; 
1 
添加 冬 件 断 点 (O) 


{} © g 
INE Mc "E c 


W Ww su ph pp 口 持续 日 志 X 
i=1<bF ch81-js-debug.js:8:5 


1.10 使 用 Firefox 浏览 器 为 js 脚本 代码 设置 断 点 1.11 使 用 步 进 (F11) 方式 调试 脚本 代码 
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© 开发 者 工具 JavaScript 全 程 实例 - http://loc... 
G Oas xb. ENS » 


[P] chol -js-debug.js X 


/** 

* Created by KING on 2019/01/18. 
Sf 

Var strLine; 


for(var i=1; i«10; i++) ( 


strLine = "i=" + i.toString() + "<br>"; 
3 console.log(strLine); 
v id div count.innerHTML += strLine; 


Dag 


会 时 过 滤 输 出 ORAE X 


^ 


co 


i=1<br> ch81-js-debug.js: 
i=2<br> che1-js-debug.js: 
isz3«br» che1-js-debug.js: 
isz4«br» che1-js-debug.js: 
i-5«br» ch81-js-debug.js: 
is6«br» ch81-js-debug.js: 
isz7«br» ch81-js-debug.js: 
i=8<br> che1-js-debug.js: 
is9«br» che1-js-debug.js: 


0 c 0o 0 Co c0 O0 CO 
ur au auno NN uc uu 


< 


1.12 ”使 用 跨越 (F10) 方式 调试 脚本 代码 
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本 章 介 绍 如 何 通 过 JavaScript 来 控制 HTML 表单 。 表 单 是 网 页 开发 中 比较 常见 且 十 分 重要 的 
一 种 元 素 ， 在 很 多 应 用 场景 下 都 会 使 用 到 。 


2.1 JavaScript 与 HTML 表单 


HTML 表单 是 一 个 包含 多 种 表单 元 素 ( 比 如 : 文本 域 、 下 拉 列 表 、 单 选 杠 、 复 选 杠 、 提 交 按 钮 
等 ) 的 区 域 。 在 HTML 表单 中 ， 用 户 可 以 输入 或 选择 多 种 类 型 的 信息 ， 然 后 提交 到 服务 器 来 处 理 。 

在 Web 开发 中 ， 通 过 JavaScript 可 以 很 有 效 地 操作 控制 表单 。 例 如 ， 验 证 表单 域 中 用 户 输入 
数据 的 合法 性 ,格式 化 表单 域 中 的 用 户 输入 数据 ,遍历 表 单 域 中 的 全 部 项 , 动态 修改 表单 域 中 某 项 
数据 ， 控 制 表单 的 提交 与 重 置 ， 等 等 。 

男 外 ， 在 HTML 5 规范 中 ， 为 表单 <form>) 增加 了 多 个 新 的 输入 类 型 ， 提 供 了 更 好 的 输入 
控制 和 验证 ， 与 JavaScript 结合 得 更 加 完美 。 

HTML 表单 是 通过 标签 (<form>) 来 定义 的 ， 有 具体 语法 格式 如 下 : 


【代码 2-1] 


«form» 
..form elements... 
«/form» 


2.2 JavaScript 遍历 表单 


HTML 表单 对 象 (Form) 中 定义 有 一 个 elements 集合 属性 ， 可 以 返回 表单 中 所 有 元 素 的 数组 
集合 。 那 么 ，JavaScript 通过 for 循环 语句 就 可 以 实现 遍历 表单 中 全 部 表单 项 的 操作 了 。 


【代码 2-2】( 详 见 源 代码 目录 ch02-js-traverse-form.html 文件 ) 


<!doctype html» 
«html lang-"en"» 


«head» 


«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
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</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 控制 表单 - 遍历 表单 </nav> 
</header> 
Chro 
«1-- 添加 文档 主体 内 容 --> 


<form name="formTraverse" method="get"> 


<p>First name: <input type="text" name="fname" /></p> 


<p>Last name: «input type="text" name-"lname" /></p> 
<input type="submit" value="Submit" /> 
</form> 
</body> 
<script type="text/javascript"> 
var i; 
var els - formTraverse.elements; 
for(i in els) { 
var el = els[i]; 
if (el.type) 
console.log("element type : " + el.type + 
",element name : " + el.name); 
} 
</script> 
</html> 


关于 【代码 2-2】 的 说 明 : 

e 第 14~18 代码 通过 标签 <form> 定 义 了 一 个 表单 ， 内 部 通过 标签 <input> 定 义 一 组 文本 框 和 一 
个 提交 按钮 。 

e 20-28 行 通过 <script> 标 签 定义 了 JavaScript 脚本 代码 ， 用 于 实现 对 表单 的 遍历 操作 。 
> 第 22 行 代码 通过 表单 form 的 elements 属性 , 获取 了 表单 域 中 全 部 表单 项 元 素 的 数组 集合 

(els ). 
> 第 23~27 行 代码 通过 for...in... 语 名 遍历 数组 集合 (els )， 并 在 控制 台中 输出 每 项 表单 元 
素 的 type 属性 和 name 属性 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 2.1 所 示 。 
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文件 昌 ”编辑 (E) 查看 W 历史 加” 书签 B) IAM "8H 
E] Javascript 全 程 实例 


Qo localhost:63342/s-total-samples/ch02, 


JavaScript 控制 表单 - 遍历 表单 


Fstname: | 


Lastname:[ | 


Submit 


[y O mER Ota O 调试 器 0 HAS (DIR » x 
B ow 过 渡 输 出 口 持续 日 志 


element type : text, element name : fname  ch82-js-traverse-form.html1:34:13 
element type : text, element name : lname  ch02-js-traverse-form.html:34:13 
element type : submit, element name : ch82-js-traverse-form.htm1:34:13 


图 2.1 JavaScript 遍历 表单 


2.3 通过 name 和 id 访问 表单 元 素 


在 JavaScript 中 ， 可 以 通过 表单 元 系 的 name 属性 和 id 属性 来 访问 该 控件 。 对 于 name 属性 需 
要 使 用 getElementsByName() 方 法 ， 而 对 于 id 属性 则 需要 使 用 getElementById() 方 法 ， 这 两 种 方法 
在 使 用 上 是 有 所 区 别 的 。 


【代码 2-3】( 详 见 源 代码 目录 ch02-js-get-ele.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 
03 «head» 
04  «!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
06 </head> 
07 <body> 
08 | «!-- 添加 文档 主体 内 容 --> 
09 <header> 
10 <nav>JavaScript 控制 表单 - 通过 name 和 id 访问 控件 </nav> 
TT «/header» 
12 cnr» 
13  «!-- 添加 文档 主体 内 容 --» 
14 «form name-"formTraverse" method-"get"» 
153 Xp»First Name: «input type="text" name-"fname" id-"id-fname" /»«/p» 


16 Xp»Last Name: «input type="text" name-"lname" id-"id-lname" /»«/p» 


17 «input type-"button" id-"id-get-name" onclick-"on get name();" 


value-"XRHBUH P m" /> 
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</ form> 

</body> 

«script type-"text/javascript"» 
function on get name() { 


var n fname = document.getElementsByName ("fname"); 


var id lname = document.getElementById ("id-lname"); 
console.log("First Name : " + n fname[0].value); 
console.log("Last Name : " + id lname.value); 
} 
</script> 
</html> 


关于 【代码 2-3】 的 说 明 : 

e 第 15-16 代码 通过 标签 <input> 定 义 一 组 文本 框 ， 而 且 同 时 增加 了 name 属性 和 id 属性 的 

e 第 22 行 代码 通过 getElementsByName("fname") 方 法 ， 实 现 了 对 第 15 行 代码 定义 标签 <input 
name="fhame"> 的 访问 。 不 过 ， 需 要 注意 的 是 该 方法 返回 的 是 一 个 控件 对 得 的 数组 集合 ， 所 
以 第 24 行 代 码 中 需要 先 使 用 数组 下 标 格式 ， 再 通过 value 属性 获取 用 户 输入 的 数据 信息 。 

o 第 23 行 代 码 是 通过 getElementById("id-lname") 方 法 ， 实 现 对 第 16 行 代码 定义 标签 <input 
id="id-Iname"> 的 访问 。 该 方法 直接 返回 了 该 控件 对 象 ， 所 以 第 25 行 代 码 可 以 直接 通过 value 
属性 获取 用 户 输入 的 数据 信息 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 2.2 所 示 。 

文件 旧 ED EB PrO S5B IAD SEU g 
JavaScript 全 程 实例 x 


Q! | © localhost:633 


JavaScript 控制 表单 - 通过 name 和 id 访问 控件 


First Name: 


Last Name: wag 


Q C gBEB Opie DWS » E] s 
W y iiie BL 


ws zz EE 信息 调式 cs XHR x 
First Name : King ch82-js-get-ele.htm1:32:9 
Last Name : Wang ch82-js-get-ele.html:33:9 


图 2.2 JavaScript 通过 name 和 id 访问 控件 
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2.4 动态 修改 表单 控件 的 值 


通过 JavaScript 可 以 动态 修改 表单 中 控件 的 值 ， 包括 文本 框 内 容 、 下 拉 沫 单 选项 文本 和 按钮 名 
称 等 ， 下 面 就 介绍 一 个 动态 修改 表单 控件 值 的 代码 实例 。 


【代码 2-4】( 详 见 源 代码 目录 ch02-js-modify-ele.html 文件 ) 


01 «!doctype html» 

02 «html lang-"en"» 

03 «head» 

04  «!-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </tit1le> 
06 </head> 

07 «body» 

08 | «!-- 添加 文档 主体 内 容 --> 


09 «header» 


10 «nav»JavaScript 控制 表单 - 动态 修改 表单 控件 的 值 </nav> 

11 «/header» 

12 «hr» 

13  «!-- 添加 文档 主体 内 容 --> 

14 «form name-"formTraverse" method-"get"» 

15 «p»First Name: «input type="text" name-"fname" id-"id-fname" 


value-"King" /»«/p» 


16 X«p»Last Name: «input type="text" name-"lname" id-"id-lname" 
value-"Wang" /»«/p» 

T «select id-"id-sel-gender"» 

18 «option value="0"> 请 选择 . . .</option> 

19 «option value="1"> 男 </option> 

20 <option value="2"> 女 </option> 

21 </select><br><br><br><br><br><br> 


22 «input type-"button" id-"id-modify-text" onclick-"on modify text();" 
value=" 修 改 控件 文本 " /> 

PA </form> 

24 </body> 

25 <script type="text/javascript"> 

26 function on_modify_text() { 


21 document.getElementById("id-fname").value - "Tina"; 

28 document.getElementById("id-lname").value = "Xi"; 

29 var len = document.getElementById ("id-sel-gender").options.length; 
30 for(let i20; i«len; i++) 


31 document.getElementById ("id-sel-gender").options[i].innerText = 
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32 document.getElementById("id-sel-gender").options[i].value; 
33 document.getElementById ("id-modify-text").value = "文本 已 经 修改 "; 


34 } 
ag fnoribs 
36 «/html» 


关于 【代码 2-4】 的 说 明 : 
第 14~ 23 代码 在 表单 内 定义 了 一 组 文本 框 、 一 个 下 拉 菜 单 和 一 个 按钮 控件 。 
e 第 27-28 行 代码 通过 设 定 新 的 value 属性 值 ， 修 改 了 第 15-16 行 代码 定义 的 文本 域 显示 
内 容 。 
e 3$ 30-32 行 代码 通过 <selec 人 > 控件 的 options 属性 ， 修 改 了 第 17-21 行 代码 定义 的 下 拉 菜 单 
e 第 33 行 代码 通过 设 定 新 的 value 属性 值 ， 修 改 了 第 22 行 代码 定义 的 按钮 名 称 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 2.3 所 示 。 继 续 单 击 页 面 中 的 
“修改 控件 文本 ”按钮 ， 页 面 更 新 后 的 效果 如 图 2.4 所 示 。 
XE) S850 EB) 历史 (5) 书签 @) 工具 中 ”帮助 HH) p ZD mE) EB) 历史 (5) SEG) IAM 帮助 H) g x 
JavaScript 全 程 实例 x [T B. EÀ Javascript 全 程 实例 | B. 
C! | © localhost:63: E "Ww tz QC | @ localhost:63: g g|» 三 


JavaScript 控制 表单 - 动态 修改 表单 控件 的 值 JavaScript 控制 表单 - 动态 修改 表单 控件 的 值 


First Name First Name 
Last Name: Wang — last Name | 


23 JavaScript 动态 修改 表单 控件 的 值 (一 ) 图 2.4 JavaScript 动态 修改 表单 控件 的 值 (二) 


2.5 获取 表单 内 文本 框 的 数量 


文本 框 (<input type="text">) 是 HTML KAPAMI, JavaScript 通过 沛 选 累计 表单 中 全 
部 <inpu 亿 标签 的 type 属性 值 是 否 为 text 类 型 就 可 以 实现 获取 表单 中 全 部 文本 框 数量 的 功能 。 
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【代码 2-5】( 详 见 源 代码 目录 ch02-js-input-text-count.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </tit1le> 
06 «/head» 

07 <body> 


08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript 控制 表单 - 获取 表单 内 文本 框 的 数量 </nav> 
11 </header> 

I2 «hr» 

13 «!-- 添加 文档 主体 内 容 --» 


14 «form name-"" method="get"> 


15 <p>First name: «input type="text" name-"fname"/»«/p» 
16 «p»Middle name: «input type="text" name-"mname"/»«/p» 
17 Xp»Last name: «input type="text" name-"lname"/»«/p» 
18 <input type="submit" value-"Submit" /> 

19 «input type-"reset" value-"Reset" /> 

20 «/form» 

21 «/body» 

22 <script type-"text/javascript"» 

VAL var i, iCounts - 0; 

24 var inputs = document.getElementsByTagName ("input"); 
29 FOr ns ont etre 

26 var el = inputs[i]; 

wy if (el.type -- "text") 

28 iCounts-**; 

29 l; 


30 console.1og(" 表 单 内 文本 框 的 数量 : " + iCounts); 
31 «/script» 
32 «/html» 


XT 【代码 2-53 的 说 明 : 


e 第 14~20 代码 在 表单 内 定义 了 一 组 文本 框 (共计 3 个 ) 和 一 组 按钮 控件 (共计 2 个 ). 
o 第 27~ 28 行 代码 通过 for 循 环 语句 ， 依 次 判断 <input> 标 签 控件 的 type 属性 值 是 否 为 “text” 
来 杠 别 该 控件 是 否 为 文本 框 。 如 果 判 断 结果 为 “true”， 就 通过 累加 器 变量 iCounts 计数 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 2.5 所 示 。 
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【代码 2-5】( 详 见 源 代码 目录 ch02-js-input-text-count.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </tit1le> 
06 «/head» 

07 <body> 


08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript 控制 表单 - 获取 表单 内 文本 框 的 数量 </nav> 
11 </header> 

I2 «hr» 

13 «!-- 添加 文档 主体 内 容 --» 


14 «form name-"" method="get"> 


15 <p>First name: «input type="text" name-"fname"/»«/p» 
16 «p»Middle name: «input type="text" name-"mname"/»«/p» 
17 Xp»Last name: «input type="text" name-"lname"/»«/p» 
18 <input type="submit" value-"Submit" /> 

19 «input type-"reset" value-"Reset" /> 

20 «/form» 

21 «/body» 

22 <script type-"text/javascript"» 

VAL var i, iCounts - 0; 

24 var inputs = document.getElementsByTagName ("input"); 
29 FOr ns ont etre 

26 var el = inputs[i]; 

wy if (el.type -- "text") 

28 iCounts-**; 

29 l; 


30 console.1og(" 表 单 内 文本 框 的 数量 : " + iCounts); 
31 «/script» 
32 «/html» 


XT 【代码 2-53 的 说 明 : 


e 第 14~20 代码 在 表单 内 定义 了 一 组 文本 框 (共计 3 个 ) 和 一 组 按钮 控件 (共计 2 个 ). 
o 第 27~ 28 行 代码 通过 for 循 环 语句 ， 依 次 判断 <input> 标 签 控件 的 type 属性 值 是 否 为 “text” 
来 杠 别 该 控件 是 否 为 文本 框 。 如 果 判 断 结果 为 “true”， 就 通过 累加 器 变量 iCounts 计数 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 2.5 所 示 。 
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«option value-"get"»get 方式 </option> 


«option value="post">post 方式 </option> 
</select> 
</p> 
«input type="button" value=" 修 改 提交 方法 " onclick="modifyMethod ()"/> 
«/form» 
«/body» 
«script type-"text/javascript"» 
function modifyMethod() { 
var fMethod = document.formMethod; // TODO: 获取 表单 DOM 
var selMethod = fMethod.selMethod.value;  // TODO: 选择 的 方法 
fMethod.method = selMethog; 
console.log ("表单 当前 选择 的 提交 方法 : " + fMethod.method); 
} 
«/script» 
«/html» 


关于 【代码 2-6】 的 说 明 : 
e 第 16~20 代码 在 表单 内 定义 了 下 拉 选 择 框 (selMethod )， 定 义 了 “get” 和 “post” 两 种 表单 
提交 方式 的 选择 项 。 
e 第 28~29 行 代码 先 获取 了 下 拉 选 择 框 (selMethod) 的 选项 值 ， 然 后 通过 该 值 修 改 (重新 定 
X) 表单 (fMethod) 的 “method” 属 性 ， 从 而 实现 了 对 表单 提交 方法 修改 的 功能 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 具体 效果 如 图 2.6 和 图 2.7 所 示 。 
XE GEI) ZEV PO S508 IBI WR y 文件 昌 S80 EB) FO 书签 B) IAD WR y 
JavaScript 全 程 实例 X DE B EÀ Javascript 全 程 实例 x pO D 


Q © localhost E e» Œ © localhost E e 7 》 三 


JavaScript 控制 表单 - 修改 表单 的 提交 方法 JavaScript 控制 表单 - 修改 表单 的 提交 方法 


请 选择 表单 提交 方法 : 请 选择 表单 提交 方法 : | post 方 式 v 


修改 提交 方法 


[y Qs Oise DE » H Xx Q Qn Opie DE » H Xx 


"m ow ieu [ ]5458 B5 "m ow uiu Osat 
去 单 当前 选择 的 提交 方法 ; get „form-method.html:39:9 去 单 当前 选择 的 提交 方法 : post ..,Form-method.html:39:9 


N 


图 2.6 JavaScript 修改 表单 的 提交 方法 (get) 图 2.7 JavaScript 修改 表单 的 提交 方法 (post) 
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2.7 动态 指定 表单 的 提交 方式 


在 前 一 个 代码 实例 的 基础 上 ， 通 过 JavaScript 可 以 进一步 动态 指定 表单 的 提交 方式 ， 有 具体 就 是 
通过 操作 表单 <form> 对 象 的 submitO) 方 法 来 实现 的 。 


【代码 2-7】( 详 见 源 代码 目录 ch02-js-form-dyn-method.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
TT 
12 
13 
14 
13 
16 
17 
18 
I 
20 
Z1 
22 
23 
24 
Ps 
26 
21 
28 
29 
30 
a 
32 
dd 
34 


<!doctype html» 
«html lang-"en"» 
«head» 


«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实 例 </tit1le> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 控制 表单 - 动态 指定 表单 的 提交 方式 </nav> 
</header> 
«hr» 
«1-- 添加 文档 主体 内 容 --> 


«form name-"formMethod" method-"" action-"ch02-js-form-dyn-submit.php"» 
«p»First name: «input type="text" name-"fname"/»«/p» 
Xp»Last name: «input type="text" name-"lname"/»«/p» 
<p> 请 选择 表单 提交 方法 : 
<select name="selMethod"> 
«option value=""> 请 选择 .. .</option> 
<option value="get">get 方式 </option> 
«option value="post">post 方式 </option> 
</select> 
</p> 
<input type="button" value=" 修 改 提交 方法 " onclick-"modifyMethod()"/» 
«/form» 
</body> 
<script type="text/javascript"> 
function modifyMethod() { 
var fMethod = document.formMethod; // TODO: 获取 表单 DOM 
var selMethod = fMethod.selMethod.value; // TODO: 选择 的 方法 
console.1og(" 表 单 当 前 选择 的 提交 方法 : " + selMethod); 
fMethod.method = selMethod; // TODO: 修改 选择 的 提交 方法 
fMethod.submit () ; 
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39 «script» 


36 «/html» 


【代码 2-7】 在 【代码 2-6】 的 基础 上 做 了 如 下 修改 : 
e 第 14 行 代码 在 表单 (fMethod) 的 声明 定义 中 通过 “action” 属性 指定 提交 的 服务 端 PHP. Xx 
件 ( "ch02-js-form-dyn-submit.php" ). 
e 4$ 15-26 代码 增加 定义 了 一 组 文本 框 ， 用 于 输入 用 户 的 名 字 。 
e 第 33 行 代码 通过 使 用 表单 (fMethod) 的 “submit()” 方 法 ， 从 而 实现 了 动态 指定 表单 提交 方 
式 并 进行 提交 的 功能 。 
Pitt fH] Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 使 用 “get” 方 式 提 交 表 单 的 效果 如 图 2.8 所 示 。 


JavaScript 全 程 实例 


€) QC |© localhost ese €) CQ | OG loca » 
/js-total-samples/ch02/ch02-js-form- 


JavaScript 控制 表单 - 动态 指定 表单 的 提交 方式 dyn-submit.php?fname=King& 
Iname=Wang&selMethod=get 


First name: 
Form Method : get. 
st name: Form fname : King. 


请 选择 表单 提交 方法 :get 方式 v) Form Iname : Wang. 


修改 提交 方法 ， 


图 2.8 JavaScript 动态 指定 表单 的 提交 方式 (get) 
如 图 2.8 所 示 ， 使 用 “get” 方 式 提交 表单 时 ，url 地 址 中 是 显示 “query string ”参数 信息 的 。 
然后 使 用 “post” 方 式 重 新 提交 一 下 表单 ， 效 果 如 图 2.9 所 示 。 
文件 昌 (E EE) 历史 (9) 350) 工具 中 SEG x | 文件 昌 S80 音 看 W PrO S59 ISD 
JavaScript 全 程 实例 BE || localhost:9090/js-total-samples/ch X | 3E B. 
€) C |© localhost? BR te ze) C | local B » 


/js-total-samples/ch02/ch02-js-form- 
JavaScript 控制 表单 - 动态 指定 表单 的 提交 方式 


First name: Form Method : post. 
Form fname : King. 


Last name: Form Iname : Wang. 
请 选择 表单 提交 方法 《1post 方 式 ~ | 


修改 提交 方法 


29 JavaScript 动态 指定 表单 的 提交 方式 (post) 
如 图 2.9 所 示 ， 使 用 “post” 方 式 提交 表单 时 ，url 地 址 中 是 隐藏 “query string” 参 数 信 息 的 。 
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28 动态 设置 焦点 控件 


HTML DOM 对 象 中 定义 有 一 个 focus() 方 法 ， 用 于 为 控件 设置 焦点 ，JavaScript 可 以 通过 该 方 
法 实现 动态 设置 控件 焦点 的 操作 。 


【代码 2-8】( 详 见 源 代码 目录 ch02-js-set-focus-ele.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
«body onload-"on load set focus()"» 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 控制 表单 - 动态 设置 焦点 控件 </nav> 
</header> 
«hr» 
«1-- 添加 文档 主体 内 容 --> 
«form name-"formTraverse" method-"get"» 
«p»First Name: «input type="text" name-"fname" id-"id-fname" 
value-"King"/»«/p» 
Xp»Last Name: «input type="text" name-"lname" id-"id-lname" 
value-"Wang"/»«/p» 
«input type="button" id-"id-get-focus-ele-fname" 
onclick-"on load set focus('id-fname');" value-" ZU BH fname 焦点 "/> 
«input type-"button" id-"id-get-focus-ele-lname" 
onclick-"on load set focus('id-lname');" value-" JAKA l1name 聚焦 "/> 
«/form» 
</body> 
<script type="text/javascript"> 
function on load set focus(thisid) { 
document.getElementById (thisid).focus(); 
) 
«/script» 
</html> 


关于 【代码 2-8】 的 说 明 : 


e 第 15~16 行 代码 在 表单 内 定义 了 一 组 文本 框 (共计 2 个 )， 用 于 测试 动态 设置 焦点 的 控件 。 
e 第 17~18 行 代码 定义 了 一 组 按钮 控件 (共计 2 个 ), 用 于 实现 对 文本 框 动态 设置 焦点 的 操作 。 
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e 第 22~24 行 代码 是 “on load set focus()" 方法 的 实现 , 通过 对 获取 的 元 素 对 象 使 用 “focus0)” 
方法 来 实现 对 该 元 素 动态 设置 焦点 的 功能 。 


2.9 ”动态 获取 焦点 控件 


前 一 个 实例 中 实现 了 动态 设置 焦点 控件 的 操作 ， 下 面 继 续 实现 动态 获取 焦点 控件 的 操作 。 在 
HTML DOM 对 象 中 定义 有 一 个 只 读 的 “document.activeElement” 属 性 ， 可 以 返回 HTML 文档 中 当 
前 取得 焦点 的 元 素 。 下 面 介 绍 一 个 通过 JavaScript 动态 获取 焦点 控件 的 代码 实例 。 


【代码 2-9】( 详 见 源 代码 目录 ch02-js-get-focus-ele.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 
«body onclick-"on active click();"» 
«1-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 表单 - 动态 获取 焦点 控件 </nav> 
</header> 
<hr> 
<!-- 添加 文档 主体 内 容 --> 
<form name="formTraverse" method="get"> 
<p>First Name: <input type="text" name="fname" id="id-fname" 
value-"King" /»«/p» 
Xp»Last Name: «input type="text" name-"lname" id-"id-lname" 
value-"Wang" /»«/p» 
«input type="button" id-"id-get-focus-ele" value=" 动 态 获取 焦点 控件 "/> 
«/form» 
</body> 
<script type="text/javascript"> 
function on active click() i 
console.log(document.activeElement.id); 
} 
</script> 
</html> 
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关于 【代码 2-9】 的 说 明 : 

@ 第 07 行 代码 为 <body> 元 素 定义 了 单 击 “onclick” 事 件 方 法 (on active click() )， 这 样 当 单 击 
表单 中 的 控件 时 会 触发 该 “onclick” 事 件 。 

e 第 14~ 18 代码 在 表单 内 定义 了 一 组 文本 框 (共计 2 个 ) 和 一 个 按钮 ， 用 于 测试 动态 获取 焦点 

e 第 21-23 行 代码 是 “on active click0” 方 法 的 实现 ， 第 22 行 代码 通过 “document. 
activeElement.id” 属性 动态 获取 焦点 控件 的 id 属性 。 

FAEH Firefox 浏览 器 运行 测试 该 HTML 网页, 依次 通过 点 击 操 作 使 得 表单 中 的 控件 获取 焦 


点 ， 具 体 效果 如 网 2.10 所 示 。 
文件 昌 S80 EEV FLO 书签 @) 工具 中 58H 


> Q | © localhost' 


JavaScript 控制 表单 - 动态 获取 焦点 控件 


First Name: | 


Last Name: Wag | 


D CHEER 回 控制 台 DEHE » i e X 


ù 时 du 口 持续 日 志 
id-fname „get-focus-ele.html:30:9 
id-lname „get-focus-ele.html:30:9 
id-get-focus-ele „get-focus-ele.html:30:9 


图 2.10 JavaScript 动态 获取 焦点 控件 


2.10 初始 化 表单 里 的 所 有 控件 


在 东 些 设计 场景 下 ，HTML 页 和 面 加 载 后 需要 为 表单 中 的 控件 初始 化 默认 值 。 要 实现 该 功能 ， 
既 可 以 通过 HTML 表单 控件 的 属性 来 实现 ,也 可 以 通过 JavaScript 来 动态 操作 。 下 面 介绍 一 个 通过 
JavaScript 实现 初始 化 表单 里 的 所 有 控件 的 代码 实例 。 


【代码 2-10】( 详 见 源 代码 目录 ch02-js-init-form-ele.html 文件 ) 


<!doctype html» 


«html lang-"en"» 
«head» 


«1-- 添加 文档 头 部 内 容 --» 
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05 <title>JavaScript 全 程 实例 </title> 

06 </head> 

07 «body onload-"initAllEle();"» 

08 «!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 初始 化 表单 里 的 所 有 控件 </nav> 
11 </header> 

Tah 

13 «!-- 添加 文档 主体 内 容 --> 


14 «form name-"formTraverse" method-"get"» 


15 X«p»First Name: «input type="text" name-"fname" id-"id-fname"/»«/p» 
16 Xp»Last Name: «input type="text" name-"lname" id-"id-lname"/»«/p» 
T <p> 请 选择 性 别 : 

18 <select name="selMethod"> 

19 «option value=""> 请 选择 . . .</option> 

20 <option value="get"> 男 性 </option> 

21 «option value="post"> 女 性 </option> 

22 «/select» 

23 «/p» 

24 «p»Birth: «input type-"date" name-"birth" id-"id-birth"/»«/p» 

25 X«p»Email: «input type-"email" name-"email" id-"id-email"/»«/p» 
26 «p»Hobby: «br» 

2 <input type="checkbox" name-"hobby" value-"sport"/»Sport«br» 
28 «input type="checkbox" name-"hobby" value-"reading"/»Reading«br» 
29 «input type="checkbox" name-"hobby" value-"tour"/»Tour«br» 
30 «input type="checkbox" name-"hobby" value-"music"/»Music«br» 
31 «input type="checkbox" name-"hobby" value-"movie"/»Movie«br» 
S P. «input type="checkbox" name-"hobby" value-"dance"/»Dance«br» 
ad «/p» 

34 «input type="submit" value=" 提 交 "/> 

35 </form> 

36 «/body» 

37 «script type="text/javascript"> 

38 function initAllEle() { 

39 // TODO: text 

40 document.getElementById("id-fname").value - "King"; 

41 document.getElementsByName ("lname") [0] .value = "Wang"; 

42 // TODO: select 

43 document.getElementsByName ("selMethod") [0].selectedIndex = 1; 
44 // TODO: 创建 一 个 当前 日 期 对 象 

45 var now = new Date(); 

46 // TODO: 格式 化 日 ， 如 果 小 于 9， 前 面 补 0 


47 var day = ("0" + now.getDate()).slice(-2); 
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48 // TODO: 格式 化 月 ， 如 果 小 于 9， 前 面 补 0 

49 var month = ("0"™ + (now.getMonth() + 1)).slice(-2); 

50 // TODO: 完整 日 期 格式 

aT var today = now.getFullYear() + "-" + (month) + "-" + (day); 
ds document.getElementById("id-birth").value - today; 

53 // TODO: email 

54 document.getElementById("id-email").value = "kingGemail.com"; 


55 // TODO: checkbox 

56 var checkHobby = document.getElementsByName ("hobby"); 
57 for (var i in checkHobby) 

58 checkHobby[i].checked = true; 

59 } 

60 </script> 

61 </html> 


XT [92-10] B) UL BH: 


© 第 07 行 代码 为 <body> 元 素 定义 了 页 面 加 载 “onload” 事 件 方法 CinitATIEle() )， 用 于 在 页 面 加 
载 完成 后 对 页 面 中 的 控件 进行 初始 化 操作 。 

e 第 14~35 行 代码 在 表单 内 定义 了 若干 控件 ， 包 括 文 本 框 、 下 拉 选 择 框 、Email 文本 框 、 日 期 
文本 框 和 复 选 框 ， 用 于 测试 控件 初始 化 操作 。 

e 第 38~59 行 代码 是 “initAllEle()” 方 法 的 实现 ， 通 过 JavaScript 进行 文本 框 、 下 拉 选 择 框 、 
Email 文本 框 、 日 期 文本 框 和 复 选 框 的 初始 化 操作 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 2.11 所 示 。 

文件 日 S80 EE) ALO S58) 工具 HAW p 


Ell ,avascript 全 得 实例 x | 十 
(¥ © localhost:6334. Ba I 


JavaScript 控制 表单 - 初始 化 表单 里 的 所 有 控件 


First Name: 
Last Name: 
请 选择 性 别 : 


Birth: 
Email: |kingGemail.com 


Hobby: 

M Sport 
Reading 
[7] Tour 
Music 
Movie 
V] Dance 


提交 


2.11 JavaScript 初始 化 表单 里 的 所 有 控件 
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2.11 复 选 框 全 选 、 取 消 及 判断 是 否 选中 的 方法 


其 实在 前 面 表 单 控件 初始 化 的 实例 中 已 经 使 用 了 复 选 框 全 部 选中 的 操作 了 。 下 面 就 完整 地 讲 
解 一 个 如 何 通 过 JavaScript 脚本 实现 复 选 框 的 全 选 、 取 消 、 部 分 选中 及 判断 是 否 选 中 方法 的 代码 
实例 。 


【代码 2-11】( 详 见 源 代码 目录 ch02-js-checkbox-oper.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 表单 - 复 选 框 全 选 、 取 消 及 判断 是 否 选 中 的 方法 </nav> 
11 </header> 

12 «hr» 

13 «!-- 添加 文档 主体 内 容 --> 


14 «form name-"formTraverse" method="get"> 


T3 <p>Hobby ( 复 选 框 checkbox): <br> 

16 «input type="checkbox" name-"hobby" value-"sport"/»Sport«br» 

17 «input type="checkbox" name-"hobby" value-"reading"/»Reading«br» 

18 «input type="checkbox" name-"hobby" value-"tour"/»Tour«br» 

19 «input type="checkbox" name-"hobby" value-"music"/»Music«br» 

20 «input type="checkbox" name-"hobby" value-"movie"/»Movie«br» 

21 «input type="checkbox" name-"hobby" value-"dance"/»Dance«br» 

22 «/p» 

zd «input type-"button" onclick-"on checkbox all click()" 
value=" 全 部 选择 "/> 

24 «input type-"button" onclick-"on checkbox none click()" 
value=" 全 部 取消 "/> 

25 «input type-"button" onclick-"on checkbox sel click()" 
value=" 部 分 选择 " /> 

26 «input type-"button" onclick-"on checkbox checked click()" 


value=" 判 断 是 否 被 选中 "/> 
27 «/form» 
28 «/body» 
29 «script type-"text/javascript"» 
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function on checkbox all click() { 
// TODO: checkbox 
var checkHobby - document.getElementsByName ("hobby"); 
for (var i in checkHobby) 
checkHobby[i].checked = true; 


) 


function on checkbox none click() { 


// TODO: checkbox 
var checkHobby - document.getElementsByName ("hobby"); 
for (var i in checkHobby) 
checkHobby[i].checked = false; 
} 
function on checkbox sel click() { 
// TODO: checkbox 
var bChecked = [true, false, true, true, false, true]; 
var checkHobby - document.getElementsByName ("hobby"); 
for (var i in checkHobby) 
checkHobby[i].checked = bChecked[i]; 
} 
function on checkbox checked click() { 
// TODO: checkbox 
var checkHobby - document.getElementsByName ("hobby"); 
for (var i = 0; i < checkHobby.length; i-**) { 
if (checkHobby[i].checked -- true) 
console.log(checkHobby[i].value * " is checked."); 
else 
console.log(checkHobby[i].value + " is not checked."); 


} 
</script> 
</html> 


关于 【代码 2-11】 的 说 明 : 
e 第 16~21 行 代码 在 表单 内 定义 了 一 组 复 选 框 ， 用 于 测试 复 选 框 全 选 、 取 消 、 部 分 选择 及 判断 
是 否 选中 的 操作 。 
e 第 29-~59 行 代码 是 对 复 选 框 进行 全 选 、 取 消 、 部 分 选择 及 判断 是 否 选中 的 操作 ， 主 要 是 通过 
复 选 框 的 “checked” 属性 来 实现 的 。 
> 第 30~35 行 代码 定义 的 “on checkbox all click()” 方 法 ， 是 实现 复 选 框 全 部 选择 的 方法 。 
> 第 36~41 行 代码 定义 的 “on checkbox none click()” 方 法 ， 是 实现 复 选 框 全 部 取消 选择 的 
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> 第 42~48 行 代 码 定义 的 “on checkbox sel click()” 方 法 ， 是 实现 复 选 框 部 分 选择 的 方法 。 
其 中 ， 第 和 4 行 代 码 定义 了 一 个 布尔 型 数组 ， 用 于 存放 复 选 框 项 是 否 被 选中 的 状态 。 
> 第 49~58 行 代 码 定 义 的 “on checkbox checked click()” 方 法 ， 是 实现 判断 菜 个 复 选 框 是 
FAEH Firefox 浏览 器 运行 测试 该 HTML 网 页 , 复 选 框 部 分 选择 和 判断 是 否 判断 是 否 被 选中 
的 效果 如 图 2.12 所 示 。 


E] JavaScript 全 程 实例 


€ -— Œ |© localhoste: . V r| o» 


JavaScript 控制 表单 - 复 选 杠 全 选 、 取 消 及 判断 是 否 选中 的 方法 


Hobby (&i&f& checkbox): 
Sport 

| | Reading 

Tour 

Music 

| ]Movie 

Dance 


[uw C Inspector E] Console CO Debugger » B] x 


B Ww Filter output E] Persist Logs 
sport is checked. che2-3s-checkbox-oper .htm1:65:17 
reading is not checked. che2-3s-checkbox-oper .htm1:67:17 
tour is checked. che2-3s-checkbox-oper .htm1:65:17 
music is checked. che2-3s-checkbox-oper .htm1:65:17 
movie is not checked. che2-3s-checkbox-oper .htm1:67:17 
dance is checked. che2-3s-checkbox-oper .htm1:65:17 


图 2.12 deaScip 复 选 框 全 选 、 取 消 及 判断 是 否 选中 的 方法 
2.12 ”如 何 使 用 隐藏 控件 


在 HTML 表单 <form> 中 还 可 以 定义 一 类 隐藏 控件 〈type=hidden ) ， 这 类 控件 在 页 面 中 是 不 显 
示 〈 隐 藏 ) 的 , 但 可 以 实现 一 些 比 较 特 殊 的 功能 。 下 面 介绍 一 个 通过 使 用 隐藏 表单 控件 实现 根据 用 
户 年 龄 目 动 分 配 卧铺 铺位 的 代码 实例 。 


【代码 2-12】( 详 见 源 代码 目录 ch02-js-hidden-ele.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 


06 
07 
08 
09 
10 
Ti 
12 
T3 
14 
L3 
16 
17 
18 
19 
20 
21 
22 
23 
24 


23 


26 
21 
28 
29 
30 
31 
32 
33 
34 
do 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
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</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 控制 表单 - 如 何 使 用 隐藏 控件 </nav> 
</header> 
«hr» 
«1-- 添加 文档 主体 内 容 --> 
«form name-"formHidden" method-"get" action-"ch02-js-hidden-ele.php"» 
«table» 
«caption»3ÉZ Bgm «/caption» 
SEES 
<th> 姓 名 : </th> 
<td><input type="text" name="name" id-"id-name"/»«/td» 
{Cr 
ELI 
<th> 出 生年 月 : </th> 
«td» 
«input type-"month" name-"birth" id-"id-birth" 
onchange-"on birth change (this.id);"/» 
«input type="hidden" name-"hidden-level" 
id-"id-hidden-level" value-""/» 
«/td» 
«/tr» 
CRES 
<th></th> 
<td><input type="submit" id-"id-submit" value=" 提 交 "/></td> 
«tro 
«/table» 
«/form» 
</body> 
<script type="text/javascript"> 
function on birth change (thisid) { 
var level = 3; 
var birth = document.getElementById(thisid).value; 
var arrBirth = birth.split('-"'); 
var birthYear - arrBirth[0]; 
var birthMonth - arrBirth[1]; 
var now - new Date(); 
var nowYear - now.getFullYear(); 
var nowMonth = now.getMonth() + 1; 
if ((nowYear - birthYear) > 60) { 
level = 1; 
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else if ((nowYear - birthYear) -- 
if(nowMonth »- birthMonth) 
level = 1; 
else 
level = 2; 
else if ((nowYear - birthYear) > 45 && (nowYear - birthYear) < 60) { 
level = 2; 
else if ((nowYear - birthYear) == 45) { 
if(nowMonth >= birthMonth) 
level - 2; 
else 
level = 3; 
else ( 
level = 3; 
} 
document.getElementById("id-hidden-level").value = level; 
} 


«/script» 
«/html» 


关于 【代码 2-12】 的 说 明 : 

e 第 14~33 行 代码 定义 了 一 个 表单 ， 其 中 action 属性 定义 了 表单 提交 的 服务 器 端 地 址 (PHP 
文件 )。 

o 第 24 行 代码 定义 了 一 个 日 期 类 型 的 文本 框 ,用 于 输入 用 户 出 生年 月 ; 同时 ,还 定义 了 onchange 
事件 处 理 方法 (on birth change() )， 当 用 户 选择 好 日 期 (日 期 数据 发 生 改 变 ) 后 会 被 触发 。 

e 第 25 行 代码 定义 了 一 个 隐藏 文本 框 控件 (<input type="hidden" 户 )， 用 于 保存 根据 用 户 出 生年 
月 计算 得 出 的 年 龄 等 级 ( 具体 内 容 见 下 面 的 js 代码 )。 

e 第 36~ 63 行 代码 是 “on birth change()” 方 法 的 实现 ， 有 具体 就 是 根据 第 24 行 代 码 用 户 选 择 的 
出 生年 月 信息 和 当前 的 年 月 信息 计算 出 用 户 的 年 龄 ， 如 果 年 龄 大 于 60 9 ( 含 60 岁 ) 则 自动 
分 配 下 铺 (通过 定义 level=1 实现 )， 如 果 年 龄 年 龄 介 于 45-60 岁 之 间 则 自动 分 配 中 铺 ( 通 过 
定义 level=2 实现 )， 而 如 果 年 龄 小 于 45 岁 则 自动 分 配 上 铺 (通过 定义 level-3 实现 ); 第 62 
行 代 码 则 将 level 等 级 数值 保存 在 第 25 行 代码 定义 的 隐藏 文本 框 中 (相当 于 保存 在 全 局 变量 
中 )。 表 单 在 提交 到 服务 器 端 后 ， 服务 器 端 PHP 文件 会 根据 第 25 行 代码 定义 的 隐藏 文本 框 控 
件 中 储存 的 level 数值 获取 到 用 户 的 年 龄 等 级 并 自动 分 配 卧铺 铺位 。 


下 面 使 用 Chrome 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 2.13 所 示 。 
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尊敬 的 King 用 户 , 系统 为 您 分 配 了 上 铺 . 
JavaScript 控制 表单 - 如 何 使 用 隐藏 控件 


姓名 : King 
BEFA: IBF x$ v 


| 提交 | 


尊敬 的 King AP, 系统 为 您 分 配 了 下 铺 ， 
Javascript 控制 表单 - 如 何 使 用 隐藏 控件 


柔 客 卧 铺 铺位 分 配 
姓名 : King 


出 生年 月 :10 年 08 月 xlv 


ex | 


图 2.13 JavaScript 使 用 隐藏 控件 的 方法 
2.13 简单 的 数字 及 字符 操作 


在 日 第 的 程序 中 ， 经 常会 涉及 数值 与 字符 的 操作 ， 例 如 将 一 些 英 文 标题 转换 为 大 写 、 将 字符 
型 转换 为 数值 型 等 。 本 节 介 绍 一 些 简单 的 处 理 方法 ， 读 者 可 以 拿 来 即 用 。 


【代码 2-13】( 详 见 源 代码 目录 ch02-js-simple-num-char.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 

«1-- 添加 文档 头 部 内 容 --» 

«title»JavaScript 全 程 实例 </title> 
</head> 
<script type="text/javascript"> 

window.onload = function () { 

getLowerCase = function (str, type) {// 小 写 转 大 写 


type = type || "locale";// 是 否 采 取 本 地 转换 格式 


return type --- "locale" && str.toLocaleUpperCase() || 


str.toUpperCase(); 
}; 
getNumbers = function (s) {// 字 符 型 转换 成 数值 型 
var n = parseInt(s，10) ;// 获 取 转 换 值 
if (isNaN(n)) return 0;// 如 果 为 NaN 则 转换 结果 为 0 
return n; 
}; 
getString = function (n) ( // 数 字 转 换 成 字符 型 


return n.toString(); 
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}; 
console.log(getLowerCase("ASDsssss2asdA")); // 小 写 转 大 写 
/* 以 下 是 字符 转换 数字 */ 
console.log(getNumbers ("ASDsssss2asdA") ) ; 
console.log(getNumbers ("123123ASDsssss2asdA")); 
console.log(getNumbers ("ASDsssss2asdA123")); 
/* 以 下 是 数字 转换 成 字符 型 */ 
console.log(getString(123123) + "类 型 : " +typeof getString(123123)); 
console.log (getString (234324) + "类 型 : " + typeof getString(234324)); 
; 
</script> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 控制 表单 - 简单 的 数字 及 字符 操作 </nav> 
</header> 
<hr> 
</body> 
</html> 


关于 【代码 2-13] 的 说 明 : 


本 例 一 共 介绍 了 3 个 处 理 函 数 : 小 写 转 大 写 、 字 符 转 数字 、 数 字 转 字符 。 
第 09 ~ 12 行 代码 是 小 写 转 大 写 ， 首 先 会 检测 type 参数 ， 然 后 根据 参数 来 选择 相应 的 内 置 函数 。 
第 13 ~ 17 行 代码 是 将 字符 转换 成 数字 ,调用 JavaScript 脚本 语言 中 的 parseInt() RAHET E, 
当 被 转换 值 为 NaN 时 返回 值 为 0。 
e 第 18~20 行 代码 是 将 数字 转换 成 字符 ,调用 JavaScript 脚本 语言 中 的 toString0) 函 数 进 行 转换 。 
e 第 21~28 行 代码 分 别 对 小 写 转 大 写 、 字 符 转 数字 、 数 字 转 字符 这 3 个 函数 方法 进行 了 测试 。 


下 面 使 用 FireFox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 2.14 所 示 。 


e 开发 者 [上 有 具 - JavaScript 全 程 实 例 - http://localhost.. 一 O 
[uy Q 查看 器 Disi D 调试 器 [)t5UmESR » 
mW yY DEH 

ASDSSSSS2ASDA simple-num-char. 

e .Simple-num-char. 


123123 Simple-num-char. 


e .Simple-num-char. 


123123 类 刑 ; string „Simple-num-char. 
2343243KH!: string .simple-num-char. 


图 2.14 JavaScript 简单 的 数字 及 字符 操作 
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2.14 BRENK PHEA EF 


TEES VETE ER Poo or ERERCPUR IRR RRE Feb. PRITAM JavaScript 
实现 高 亮 显 示 表 单 中 焦点 控件 的 代码 实例 。 


【代码 2-14】( 详 见 源 代 码 目录 ch02-js-focus-ele-highlight.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --» 

05 «title»JavaScript 全 程 实 例 </tit1le> 
06 </head> 

07 <body> 


08 «!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 «nav»JavaScript 控制 表单 - 高 亮 显 示 表 单 中 的 焦点 控件 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 «form name-"formHighlight" method-"get"» 


14 «table» 

15 «tr» 

16 «th»First Name: «/th» 

17 <td><input type="text" id-"id-fname" onfocus-"highlight (this.id);" 
value-"King"/»«/td» 

18 CFEPS 

19 SEE 

20 «th»Last Name: «/th» 

21 «td»«input type-"text" id-"id-lname" onfocus-"highlight (this.id);" 
value-"Wang"/»«/td» 

22 <Er 

23 «tr» 

24 «th»«/th» 

23 <td><input type="button" id="id-btn-focus-ele" onfocus= 
"highlight (this.id);" value=" 高 亮 显示 焦点 控件 "/></td> 

26 Er 

271 «/table» 

28 «/form» 

29 «/body» 


30 «script type-"text/javascript"» 
31 function highlight(thisid) ( 


32 
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var frmEle - formHighlight.elements; 
var eleFocus - document.activeElement; 
for (var i20; i«frmEle.length; i++) { 
if(frmEle[i].id == eleFocus.id) { 
console.log(frmEle[i].id); 


console.log(eleFocus.id); 


document.getElementById(thisid).style.border - 

"2px solid 1666"; 
document.getElementById(thisid).style.fontWeight = "bold"; 
document.getElementById(thisid).style.color = "4fff"; 
document.getElementById(thisid).style.backgroundColor - 

"$888"; 

) else ( 
console.log(frmEle[i].id); 
console.log(eleFocus.id); 
document.getElementById(frmEle[i].id).style.border = ""; 
document.getElementById(frmEle[i].id).style.fontWeight - ""; 
document.getElementById(frmEle[i].id).style.color = ""; 
document.getElementById(frmEle[i].id). 

style.backgroundColor - 


} 
«/script» 
«/html» 


关于 【代码 2-14] 的 说 明 : 

e 第 13~28 行 代码 定义 了 一 个 表单 ， 其 中 定义 了 一 组 文本 框 和 一 个 按钮 控件 ; 同时 ， 为 这 些 表 
单 控件 定义 了 onfocus 事件 处 理 方 法 ( highlight() ). 

e 第 31~51 行 代码 是 highlight() 方 法 的 实现 ， 有 具体 就 是 使 用 前 面 实例 中 介绍 过 的 activeElement 
属性 获取 当前 焦点 控件 ， 然 后 为 其 添加 高 亮 显示 的 CSS 样式 代码 。 

下 面 使 用 FireFox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 2.15 所 示 。 


First Name: 


图 2.15 高 党 显示 表单 中 的 焦点 控件 


如 图 2.15 所 示 ， 但 用 户 使 用 Tab 键 切换 表单 中 控件 的 焦点 时 ， 获 取 焦 点 的 控件 具有 了 高 完 显 
示 的 样式 。 
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2.45 动态 添加 、 删 除 下 拉 菜 单 选 项 


在 实际 的 网 站 运营 中 很 多 数据 都 是 动态 变化 的 ， 比 如 一 些 下 拉 菜 单 的 选项 ， 此 时 就 需要 利用 
JavaScript 来 动态 地 添加 或 删除 选项 了 。 其 实 ， 所 谓 的 动态 添加 或 删除 下 拉 菜 单 的 选项 ， 实 际 上 就 
是 动态 地 操作 DOM 对 象 .JavaScript 提供 了 为 下 拉 素 单 执行 添加 选项 和 删除 选项 的 API 一 一 add() 
方法 和 remove() 方 法 。 


【代码 2-15】( 详 见 源 代码 目录 ch02-js-select-add-del.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --» 

05 «title»JavaScript 全 程 实例 </tit1le> 
06 </head> 

07 «body» 


08 «!-- 添加 文档 主体 内 容 --» 

09 <header> 

10 <nav>JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 菜 单 选项 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 «form name-"formSelectAddRemove" method-"get"» 


14 «table» 

15 «caption»«/caption» 

16 «tr» 

17 <th rowspan="1" colspan="1"></th> 

18 <td rowspan="1" colspan="3"> 

19 <fieldset> 

20 <legend> 添 加 选项 </legend> 

21 «table» 

22 CLES 

23 «th rowspan-z"1" colspan-"1"»Value:«/th» 

24 «td rowspan-"1" colspan-"1"» 

25 «input type="text" class-"input-sel" name-"optValue" 
id-"id-optValue"/» 

26 «/td» 

27 -Er> 

28 中 下 过 

29 «th rowspan-"1" colspan-"1"»Text:«/th» 

30 «td rowspan-"1" colspan-"1"» 


31 «input type="text" class-"input-sel" name-"optText" 


34 


32 
33 
34 
39 
36 


37 


38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
JI 
52 
99 
54 
D 


56 
sY) 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
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id-"id-optText"/»«/td» 
SITE 
«tr» 
«th»«/th» 


«td rowspan-"1" colspan-"1"» 


«input type="button" id-"id-input-add-opt" 


value=" 添 加 选项 " 


onclick-"on add opt click(this.id);"/» 


«/td» 
C/EPR» 
«/table» 
«/fieldset» 
«/td» 
«/tr» 
EET 
«th rowspan-"1" colspan-"1"»5Hobby:«/th» 
«td rowspan-"1" colspan-"1"» 
«select name-"selHobby" id-"id-selHobby"» 
<option value=""> 请 选择 . . .</option> 


<option value="sport" selected="selected">Sport</option> 


<option value="reading">Reading</option> 
<option value="tour">Tour</option> 
</select> 
</td> 
<th></th> 
<td rowspan="1" colspan="1"> 
<input type="button" id="id-input-remove-opt" 
value=" 删 除 选 项 " 


onclick-"on remove opt click(this.id);"/» 


«/td» 
«/tr» 
«/table» 
«/form» 
</body> 
<script type="text/javascript"> 
/** 


* remove option 

* @param thisid 

5E 

function on remove opt click(thisid) { 
var selHobby = document.getElementById ("id-selHobby"); 
selHobby.remove (selHobby.selectedIndex); 


71 
72 
73 
74 
39 
76 
Ti 
78 
79 
80 
81 
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/** 
* add option 


* Qparam thisid 
di 
function on add opt click(thisid) { 


var selHobby = document.getElementById ("id-selHobby"); 
var option - document.createElement ("option"); 
option.value = document.getElementById ("id-optValue").value; 
option.text = document.getElementById("id-optText").value; 
selHobby.add(option, null); 

} 


02 «script» 
83 «/html» 


关于 【代码 2-15】 的 说 明 : 


第 46~ 51 行 代码 定义 了 一 个 下 拉 菜 单 ， 并 初始 化 了 几 个 选项 ; 然后 动态 添加 和 删除 选项 的 操 

作 都 是 基于 这 个 下 拉 菜 单 来 操作 的 。 

第 55 ~ 56 行 代码 定义 了 一 个 按钮 控件 ， 并 定义 了 onclick 单 击 事件 方法 
( on remove opt click() )， 用 于 执行 删除 选项 的 操作 。 第 67 ~ 70 行 代码 是 事件 方法 
(on remove opt click() ) 的 具体 实现 ， 第 69 行 代码 通过 remove() 方 法 删除 指定 的 选项 
( selectedIndex )。 

第 36-37 行 代码 定义 了 另 一 个 按钮 控件 ， 并 定义 了 onclick 单 击 事件 方法 
( on add opt click() )， 用 于 执行 添加 选项 的 操作 。 第 75 ~ 81 行 代码 是 事件 方法 
(on add opt click() ) 的 具体 实现 ， 第 78~ 79 行 代码 获取 了 用 户 输入 的 选项 信息 (value 值 

和 text 文 本 )， 第 80 行 代码 通过 add() 方 法 添加 刚刚 定义 的 选项 。 


下 面 使 用 FireFox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 2.16 和 图 2.17 所 示 。 


文件 昌 S80 ”查看 W PLO #20 IBID MIO p x |X40 SE SEU PLO #20 工具 中 SEU mn x 


JavaScript 全 程 实例 X | 十 B JavaScript 全 程 实例 x |t zi 
C OD localhost:6? ER e * 三 C | (D localhost5* SR € » 三 
JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 茉 单 选项 JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 芋 单 选项 


添加 选 硕 一 一 一 一 
Value musc | 


Text: Music 


R] 2.16 JavaScript 动态 添加 下 拉 菜 单 选项 


36 | JavaScript+Vue+React 全 程 实例 


文件 日 ”编辑 日” 查看 MW PO 书签 B) ISM $88 H) g 文件 昌 SS ZEV PLO 书签 B) 工具 中 ”帮助 (H) g 


JavaScript 全 程 实例 : JavaScript 全 程 实例 


^ C | © localhost:63: BR see 三 > Q |© localhost63: o 


JavaScript 控制 表单 - JAA, HER TARAN JavaScript 控制 表单 - 动态 添加 、 删 除 下 拉 茉 单 选项 


一 添加 选项 一 一 一 一 一 
Value: | 


Tet | 
添加 选项 


] 


Hobby:[sport “|~| | 删除 选项 | 


图 2.17 JavaScript 动态 删除 下 拉 菜 单 选项 


第 3 章 JavaScript 控制 DOM 


本 章 介绍 如 何 通过 JavaScript 来 控制 HTML. DOM. DOM 是 HTML 网 页 的 标准 模型 和 编程 接 
口 ， 是 网 页 开发 中 重要 的 基础 核心 。 


3.1 JavaScript 与 HTML DOM 


DOM (Document Object Model, 文档 对 象 模型 ) 是 W3C 组 织 推荐 的 处 理 可 扩展 标志 语言 的 标 
准 编程 接口 。 在 HTML 网 页 中 ， 页 面 的 全 部 对 象 被 组 织 成 一 个 树 形 结构 ， 而 这 个 结构 模型 也 就 是 
所 谓 的 HTML DOM. 

HTML DOM 是 W3C 组 织 推 出 的 标准 对 象 模型 和 标准 编程 接口 , 其 定义 了 所 有 HTML 元 素 的 
对 象 和 属性 ， 以 及 访问 它们 的 方法 。 也 就 是 说 ，HTML DOM 是 关于 如 何 操作 〈 获 取 、 添 加 、 修 改 
或 删除 ) HTML 元 素 对 象 的 标准 。 

相信 读者 都 听 说 过 HTML 网 页 有 静态 页 面 和 动态 页 面 之 分 。 如 果 一 个 网 页 中 仅仅 是 由 各 种 
HTML 标签 元 系 组 合 而 成 ， 那 么 一 般 称 之 为 静态 页 面 。 如 果 在 一 个 网 页 中 使 用 了 JavaScript 脚本 代 
码 ， 束 可 以 称 之 为 动态 页 面 了 。JavaScript 就 是 通过 操作 HTML DOM 对 象 模型 实现 了 对 HTML 页 
面 中 的 元 素 、 属 性 、 样 式 和 事件 的 控制 ， 从 而 构建 出 HTML 动态 页 面 。 

HTML DOM 定义 了 一 个 Document 对 象 〈“ 每 一 个 载 入 浏览 亏 的 HTML. 文档 都 会 生成 一 个 
Document 对 象 ) ， 通 过 该 对 象 可 以 使 用 JavaScript 脚本 语言 对 HTML 页 和 面 中 的 元 素 对 象 进行 访问 。 
下 面 给 出 一 个 利用 的 、 通 过 元 素 对 象 的 id 属性 和 name 属性 获取 对 该 元 素 对 象 引 用 的 代码 实例 。 


【代码 3-1] 


/** 
* 通过 id 属性 和 name 属性 获取 对 象 


ur 
document .getElementById (id) // TODO: 通过 id 获取 对 象 
document .getElementsByName (name) // TODO: 通过 name 获取 对 象 


3.2 通过 id 获取 网 页 中 的 元 素 对 象 


HTML DOM 定义 了 一 个 getElementById() 方 法 , 专门 用 于 获取 对 拥有 指定 id 的 元 素 对 象 集合 中 
的 第 1 个 元 素 对 象 的 引用 。 下 面 介 绍 一 个 JavaScript 通过 id 属性 获取 对 元 素 对 象 引用 的 代码 实例 。 
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【代码 3-2】( 详 见 源 代码 目录 ch03-js-get-id.html 文件 ) 


01 «!doctype html» 

02 «html lang-"en"» 

03 «head» 

04  «!-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 ”<!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav>JavaScript 控制 DoM - 通过 id 获取 网 页 中 的 元 素 对 象 </nav> 

ti </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 <p>First Name: <input type="text" name="fname" id="id-fname" /></p> 

14 <p>Last Name: <input type="text" name-"lname" id-"id-lname" /></p> 

13 <input type="button" id="id-get-id" onclick="on get id();" 
value=" 通 过 id 获取 " /> 


16 «div» 


LF <span id="id-span-1">Full Name :&nbsp; &nbsp;</span><br> 
18 <span id="id-span-2">Full Name :&nbsp; &nbsp;</span><br> 
19 <span id="id-span-3">Full Name :&nbsp; &nbsp;</span><br> 
20 </div> 
21 </body> 


22 <script type="text/javascript"> 
ed function on get id() { 


24 var id fname - document.getElementById ("id-fname"); 

25 var id lname = document.getElementById ("id-lname"); 

26 var full name = id fname.value + " " + id lname.value; 

2] for (var i=l; i<=3; i++) 

28 document .getElementById("id-span-" + i).innerText += full name; 
29 } 

30 «scripto 

31 «/html» 


关于 【代码 3-2】 的 说 明 : 

e 第 13~14 行 代码 通过 标签 <input> 定 义 一 组 文本 框 (分 别 定 义 了 id 属性 )， 用 于 输入 姓名 。 

e 第 17~ 19 行 代码 通过 标签 <span> 定 义 了 一 组 行内 元 素 (分 别 定义 了 有 一 定 规则 的 id 属性 )， 
用 于 显示 从 第 13~ 14 行 代码 中 定义 的 文本 框 中 获取 姓名 。 

o 第 27~28 行 代码 通过 一 个 for 语句 循环 调用 getElementById() 方 法 ， 依 次 将 姓名 信息 显示 在 
第 17 ~ 19 行 代 码 定 义 的 <span> 行 内 标签 元 素 中 。 这 里 特别 需要 留意 的 是 ，getElementById() 
方法 中 id 参数 是 根据 自 变量 i 的 取 值 来 生成 的 。 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.1 所 示 。 
XO SS ZEV PRO 书签 四 工具 中 帮助 (H) g x 


JavaScript 全 程 实例 B. 


^ Q | © localhost633. 


JavaScript 控制 DOM - 通过 id 获取 网 页 中 的 元 素 对 象 


First Name: 


LasName[wmg | 
ull Name : King Wanc 
ull Name : King Wang 


Full Name : King Wang 


3.1 JavaScript 通过 id 获取 网 页 中 的 元 素 对 象 
3.3 通过 name 获取 网 页 中 的 复 选 杠 


HTML DOM 还 定义 了 一 个 getElementsByName() 方 法 , 专门 用 于 获取 对 拥有 指定 name 的 全 部 
元 素 对 象 集合 的 引用 。 下 面 介 绍 一 个 JavaScript 通过 name EEIE IAHE (Checkbox) 对 象 集合 
引用 的 代码 实例 。 


【代码 3-3】( 详 见 源 代码 目录 ch03-js-get-checkbox.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 


<body> 
«1-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 DOM - 通过 name 获取 网 页 中 的 复 选 框 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<p>Hobby: <br> 


40 | Javascript+Vue+React 全 程 实例 


14 «input type="checkbox" name="hobby" value-"sport" checked /»Sport 
15 «input type="checkbox" name-"hobby" value-"reading"/»Reading 

16 «input type="checkbox" name-"hobby" value-"tour" checked /»Tour 

T7 <input type="checkbox" name="hobby" value="music"/>Music& 

18 «input type="checkbox" name-"hobby" value-"movie" checked /»Movie 
19 «input type-"checkbox" name-"hobby" value-"dance"/»Dance 

20 €«/p» 

21 «p» 

22 «input type-"button" onclick-"on get checkbox();" value=" 获 取 全 部 "/> 
23 «input type-"button" onclick-"on get checkbox checked();" 


value=" 获 取 全 部 选中 项 "/> 
24 «input type-"button" onclick-"on get checkbox unchecked();" 


value=" 获 取 全 部 非 选 中 项 "/> 


25 </p> 

26 «/body» 

27 «script type-"text/javascript"» 

28 p** 

29 * Func - Get all Checkbox 

30 *y 

Sr function on get checkbox() { 

32 var cb = document.getElementsByName ("hobby"); 

33 console.log ("Checkbox --- "); 

34 cb.forEach (function (item) { 

35 console.log("value : " * item.value + ", text : " -* 
item.nextSibling.nodeValue); 

36 )); 

ay } 

38 iai 

39 * Func - Get all checked Checkbox 

40 i 

41 function on get checkbox checked() { 

42 var cb = document.getElementsByName ("hobby"); 

43 console.log("checked Checkbox --- "); 

44 cb.forEach (function (item) { 

45 if (item.checked) 

46 console.log("value : " + item.value + ", text : " + 

item.nextSibling.nodeValue); 

47] )); 

48 } 

49 Ke 

50 * Func - Get all unchecked Checkbox 


51 */ 


第 3 章 JavaScript 控 制 DOM | 41 


52 function on get checkbox unchecked() { 


Ba var cb = document.getElementsByName ("hobby") ; 

54 console.log("unchecked Checkbox --- "); 

us cb.forEach (function (item) { 

56 if (!item.checked) 

57 console.log("value : " + item.value + ", text : 
item.nextSibling.nodeValue); 

58 ); 

59 } 

60 «/script» 

61 «/html» 


关于 【代码 3-3】 的 说 明 : 

e $ 14-19 行 代 码 通过 标签 <input> 定 义 一 组 复 选 框 (定义 了 相同 的 name 属性 )， 表 明 是 一 个 
分 组 的 复 选 框 。 

e 第 32 行 代码 通过 name 属性 获取 了 全 部 复 选 框 的 对 象 集合 , 第 36 ~38 行 代码 通过 forEach i% 
代 语 名 遍历 了 全 部 复 选 框 ， 并 通过 浏览 器 控制 台 输出 了 复 选 框 的 value 属性 值 。 

o 第 45 行 和 第 56 行 代码 分 别 通过 判断 复 选 框 的 checked 属性 来 筛选 当前 复 选 框 是 否 被 选中 ， 
然后 通过 浏览 器 控制 台 输 出 了 复 选 框 的 value 属性 值 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.2 和 图 3.3 所 示 。 
XH mE) 查看 (V) HO 书签 (8) 工具 中 ”帮助 (H) 


Eg Javascript 全 程 实例 


Q! | ®© localhost:63342/js-total-samples/cl 


JavaScript 控制 DOM - 通过 name 获 取 网 页 中 的 复 选 框 


Hobby: 
MSport Reading MTour DMusic MMovie DDance 


,获取 全 部 ”获取 全 部 选中 项 “| 获取 全 部 非 选中 项 


Q ”人心 查 看 器 ” 因 控 制 台 ” 品 调试 器 {]】 样 式 编辑 跨 @ 攻 能 »》 Hx 


Wow iu NL 持续 日 志 
Checkbox --- ch03-js-get-checkbox.htm1:42:9 
value : sport, text : Sport ch83- js-get-checkbox.html:44:13 
value : reading, text : Reading ch83-js-get-checkbox.html:44:13 


value : tour, text : Tour ch83-js-get-checkbox.html1:44:13 
value : music, text : Music ch83- js-get-checkbox.htm1:44:13 
value : movie, text : Movie ch83-js-get-checkbox.htm1:44:13 
value : dance, text : Dance ch83- js-get-checkbox.htm1:44:13 


图 3.2 JavaScript 通过 name 属性 获取 网 页 中 的 全 部 复 选 框 
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文件 日 ”编辑 EEV PLO 书签 B) 工具 中 ”帮助 (H) 


园 JavaScript 全 程 实例 x | 十 


C! | © localhost:63342/js-total-samples/cl 
JavaScript 控制 DOM - 通过 name 获 取 网 页 中 的 复 选 框 


Hobby: 
MSport Reading MTour DMusic MMovie DDance 


获取 全 部 “| 获取 全 部 选中 项 | ”获取 全 部 非 选中 项 


Q Oas Otit DiE (memes GE » Hx 


w w 过 滤 输 出 口 持 续 日 志 
checked Checkbox --- ch83- js-get-checkbox.html1:53:9 
value : sport, text : Sport ch83-js-get-checkbox.html:56:17 
value : tour, text : Tour ch83-js-get-checkbox.html:56:17 
value : movie, text : Movie ch83-js-get-checkbox.html:56:17 


33 JavaScript 通过 name 属性 获取 网 页 中 全 部 选中 的 复 先 杠 
3.4 通过 标签 名 获取 网 页 中 的 多 个 文本 


除了 前 面 介 绍 的 通过 标签 元 素 的 id 属性 和 name 属性 获取 对 象 引 用 ，HTML DOM 还 定义 了 一 
个 getElementsByTagName() 方 法 ， 专 门 用 于 获取 对 拥有 指定 标签 名 的 全 部 元 素 对 象 集合 的 引用 。 
下 面 介 绍 一 个 JavaScript 通过 标签 名 获取 网 页 中 多 个 文本 的 代码 实例 。 


【代码 3-4】( 详 见 源 代 码 目录 ch03-js-get-tag.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 DOM - 通过 标签 名 获取 网 页 中 的 多 个 文本 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 


<p>First Name: <input type="text" name="fname" id="id-fname"/></p> 


<p>Last Name: «input type="text" name-"lname" id="id-lname"/></p> 
<input type="button" onclick-"on get tag text();" value=" 获 取 (text) 文本 "/> 
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«input type-"button" onclick-"on get tag button();" 
value=" 获 取 (button) 文本 "/> 
</body> 
«script type-"text/javascript"» 
/** 
* Func - get input[type-text] 
d d 
function on get tag text() { 
var inputs - document.getElementsByTagName ("input"); 
console.log("input[type-text] --- "); 
for (var i2 0; i < inputs.length; i-*-*) ( 
if (inputs[i].type == "text") 


console.log("value : " + inputs[i].value); 


* Func - get input[type-button] 
ai i 


function on_get_tag_button() { 


var inputs = document.getElementsByTagName ("input"); 
console.log ("input [type=button] --- "); 
for (var i = 0; i < inputs.length; 1tt) ( 

if (inputs[i].type == "button") 


console.log("value : " + inputs[i].value); 


) 
«/script» 
«/html» 


关于 【代码 3-4】 的 说 明 : 

e 第 13~14 行 代码 通过 标签 <input type="text"> 定 义 一 组 文本 框 ， 第 15-16 行 代码 通过 标签 
«input type="button" > Z 义 另 一 组 按钮 控件 ， 而 且 这 两 组 均 是 通过 <input> 标 签 来 定义 的 。 

e 第 23 行 代 码 通过 标签 名 获取 了 全 部 <input> 标 签 元 素 的 对 象 集合 。 第 25-28 行 代码 通过 for 
循环 语句 遍历 了 全 部 <inpuf> 标 签 元 素 。 其 中 ， 第 26 行 代码 通过 判断 type 属性 值 (text ) kih 
选集 合 中 的 文本 框 类 型 ， 并 通过 浏览 器 控制 台 输 出 了 文本 框 的 value 属性 值 。 

o 第 37 行 代码 通过 判断 type 属性 值 (button ) 来 第 选集 合 中 的 按钮 控件 类 型 ， 并 通过 浏览 器 控 
制 台 输出 了 按钮 控件 的 value 属性 值 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.4 所 示 。 
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文件 (日 ”编辑 (E) 查看 (V) Ds) 书签 (8) IRM 帮助 (由 
E] Javascript 全 程 实例 x | 


Œ | © localhost:63342/js-toi 


Javascript 控制 DOM - 通过 标签 名 获取 网 页 中 的 多 个 文本 


First Name 
Last Name: 


EC | [FE ] 
[y OC ER Oa Dikta () Enesa » H Xx 


W ow ieu 口 持续 日 志 
input[typestext] --- ch83-js-get-tag.html1:33:9 
value : King ch83-js-get-tag.html:36:17 
value : Wang ch83-js-get-tag.html:36:17 
input[typesbutton] --- ch83-js-get-tag.htm1:44:9 
value : 获取 (text ) 文 本 ch83-js-get-tag.html :47:17 
value : 获取 (button) 文 本 ch803-js-get-tag.html:47:17 


34 JavaScript 通过 标签 名 获取 网 页 中 的 多 个 文本 


3.5 遍历 网 页 元 素 的 全 部 属性 


HTML DOM 为 标签 元 素 定 义 了 一 个 attributes 属性 , 用 于 返回 指定 标签 元 素 的 属性 集合 。 借助 
attributes 属性 ，JavaScript 通过 一 个 循环 语句 就 可 以 实现 遍历 标签 元 素 全 部 属性 的 操作 了 。 


【代码 3-5】( 详 见 源 代码 目录 ch03-js-get-attributes.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 DoM - 遍历 网 页 元 素 的 全 部 属性 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<p>Name: «input type-"text" class-"css" name-"name" id-"id-name" 
value-"King"/»«/p» 


«input type-"button" id-"id-get-attr" onclick-"on get attr();" 
value=" 获 取 标 签 的 全 部 属性 "/> 
</body> 
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<script type="text/javascript"> 
/** 
* Func - get attributes 
d i 
function on get attr() { 


var name = document.getElementById ("id-name"); 
var attrs - name.attributes; 
console.log("input name's all attributes --- "); 
for (var i2 0; i < attrs.length; i-**) | 
console.log("attr name : " + attrs[i].name + ", value : 


attrs[i].value); 


} 
«/script» 
«/html» 


关于 【代码 3-5】 的 说 明 : 

e 第 13 行 代码 通过 标签 <inpuf> 定 义 一 个 文本 框 ， 为 了 测试 attributes 属性 的 使 有 用， 特意 定义 了 
type. class. name. id (id-"id-name" ) 和 value 这 5 个 属性 。 

o 第 21 行 代码 通过 id 属性 获取 了 文本 框 (id="id-name" ) 对 象 。 

o 22 行 代码 通过 attributes 属性 获取 了 该 文本 框 全 部 属性 的 集合 (C attrs ). 

e 第 24~26 行 代码 通过 for 循环 语句 遍历 了 属性 集合 (attrs )， 其 中 ， 第 25 行 代码 通过 浏览 器 
控制 台 输出 了 文本 框 各 个 属性 的 名 称 (name) 和 属性 值 (value )。 


FAEH Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.5 所 示 。 
文件 F) 编辑 日 ”查看 VV) 历史 (9) 书签 B 工具 中 ”帮助 (H) 
图 Javascript 全 程 实例 


t4 Mo, localhost:63342/s-total-samples/ch03/c s 


JavaScript 控制 DOM - 遍历 网 页 元 素 的 全 部 属性 


Name: — | 


获取 标签 的 全 部 属性 
Q Oas Oss DIME (mcam Gu » Bx 


W wy ume ELT IL. 
input name's all attributes --- ch63-js-get-attributes.htm1:32:9 
attr name : class, value : css ch83-js-get-attributes.html1:34:13 


attr name : name, value : name ch83-js-get-attributes.html:34:13 
attr name : id, value : id-name ch83-js-get-attributes.html:34:13 
attr name : value, value : King ch83-js-get-attributes.html:34:13 
attr name : type, value : text ch83-js-get-attributes.html1:34:13 


图 3.5 JavaScript 遍历 网 页 元 素 的 全 部 属性 
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3.6 动态 创建 网 页 新 文本 段 洛 


HTML DOM 定义 了 一 个 createElement(0 方 法 ， 可 以 用 于 创建 各 种 元 素 节 点 ， 同 时 该 方法 返回 
一 个 元 素 对 象 。 在 新 的 元 素 节点 创建 好 后 ， 再 通过 appendChild()77 1X && insertBefore() 方 法 插入 元 素 
节点 ， 就 可 以 实现 动态 创建 网 页 元 素 的 功能 了 。 

下 徊 介绍 一 个 很 常用 的 JavaScript 动态 创建 新 的 文本 段落 〈<p> 标 签 元 素 ) 的 代码 实例 。 


【代码 3-6】( 详 见 源 代码 目录 ch03-js-createElement-p.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 DOM - 动态 创建 网 页 新 文本 段落 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id="id-divl" class="css-p"></div> 
«div id-"id-div2" class-"css-p"» 
<p> 已 经 存在 的 文本 段落 .</p> 
«/div» 
«div id-"id-div3" class-"css-p"» 
<p> 第 一 段 文 本 段落 .</p> 
<p> 第 三 段 文本 段落 .</p> 
</div> 
«input type-"button" onclick-"on createEle p new();" 
value=" 动 态 创建 文本 段落 " /> 
«input type-"button" onclick="on createEle p append();" 
value=" 动 态 奶 加 文本 段落 " /> 
«input type-"button" onclick-"on createEle p insert();" 
value=" 动 态 插 入 文本 段落 " /> 
</body> 
<script type="text/javascript"> 


function on createEle p new() { 


var id divl = document.getElementById ("id-div1"); 


第 3 章 JavaScript 控 制 DOM | 47 


var pl = document.createElement ("p"); 


pl.innerText = "动态 创建 的 文本 段落 ."; 
id divl.appendChild(p1); 


function on createEle p append() I 
var id div2 = document.getElementById ("id-div2"); 
var p2 2 - document.createElement ("p"); 
p2 2.innerText = "动态 奶 加 (appendchild) 的 文本 段落 ."; 
id div2.appendChild(p2 2); 

} 

function on createEle p insert() { 
var id div3 = document.getElementById("id-div3"); 


var child p - id div3.children; 


var p3 1 - child p[0]; 
var p3 3 = child p[i]? 
var p3 2 - document.createElement ("p"); 
p3 2.innerText = "动态 插入 (insertAfter) 的 文本 段落 ."; 
id div3.insertBefore(p3 2, p3 3); 
) 
47 </script> 
48 </html> 


关于 【代码 3-6】 的 说 明 : 


e 第 13 行 、 第 14~ 16 行 和 第 17 ~ 20 行 代码 分 别 通过 标签 <div> 定 义 3 个 层 对 每 ， 在 每 个 层 中 
分 别 加 入 了 不 同 数量 的 段落 标签 <p>， 目 的 是 为 了 分 别 实现 动态 创建 、 追 加 和 插入 文本 段落 
的 功能 

e 第 26-31 行 代 码 定义 的 函数 实现 了 EUREEN; 是 第 28 ~ 29 行 代 码 通过 
jen 法 创建 了 一 个 段落 <p> 对 得 (pl )， 并 通过 innerText 属性 定义 了 文本 内 容 ; 

第 30 行 代 码 通过 appendChild() 方 法 将 新 创建 的 文本 段落 (pl ) 对 象 动态 插入 到 第 13 行 代码 
定义 的 标签 <div> 中 。 

e 第 32~37 行 代码 定义 的 函数 实现 了 动态 追加 文本 段落 的 操作 。 注 意 ，appendChild() 方 法 会 将 
新 对 象 自动 插入 同 级 兄弟 对 象 的 最 后 位 置 。 

e 第 38-46 行 代码 定义 的 函数 实现 了 动态 插入 文本 段落 的 操作 。 注 意 ， 该 操作 是 通过 
insertBefore() 方 法 实现 的 ， 因 为 appendChild0 方 法 是 无 法 实现 将 新 对 象 插 入 到 同 级 兄弟 对 象 
之 间 的 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.6 所 示 。 
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AÐ SEE) Ze) PLO 3G IRM- 帮助 山 x || XE mE 查看 W 历史 (8) 书签 (8) IRR 
El Javascript 全 程 实例 x | 证 D | EB Javascript 全 程 实例 x | 十 


œŒ | © localhost:6 i eg 三 > @ ®© localhost $38 es 


JavaScript 控制 DOM - 动态 创建 网 页 新 文本 段落 Javascript 控制 DOM - 动态 创建 网 页 新 文本 段落 


—€— ERN 
已 经 存在 的 文本 段落 . 


Z 已 经 存在 的 文本 段落 . 
动态 追加 (appendChild) 的 文本 段落 , 


XT 动态 插入 (insertAften) 的 文本 段落 


C 


图 3.6 JavaScript 动态 创建 网 页 新 文本 段落 


3.7 ”动态 删除 网 页 文本 段 洛 


在 3.6 节 中 介绍 了 动态 创建 新 文本 段落 的 方法 ， 本 节 将 介绍 动态 删除 文本 段落 的 方法 。HTML 
DOM 对 象 定义 了 一 组 remove(0) 方 法 和 removeChild0) 方 法 ， 可 以 用 于 动态 删除 各 种 元 素 节点 。 

下 面 给 出 一 个 JavaScript 通过 remove(0) 方 法 和 removeChild0) 动 态 删 除 文本 段落 (<p> 标 签 元 素 ) 
的 代码 实例 。 


【代码 3-7】( 详 见 源 代码 目录 ch03-js-remove-p.html 文件 ) 


<!doctype html» 

<html lang="en"> 

<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 

</head> 

<body> 

<!-- 添加 文档 主体 内 容 --> 

<header> 
<nav>JavaScript 控制 DOM - 动态 删除 网 页 文本 段落 </nav> 

</header> 

<!-- 添加 文档 主体 内 容 --> 

«div id-"id-divl" class-"css-p"» 
<p> 动 态 创建 的 文本 段落 .</p> 

«/div» 


«div id-"id-div2" class-"css-p"» 


T 
18 
19 
20 
21 
22 
23 
24 
25 
26 


27 


28 
29 
30 
31 
32 
33 
34 
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36 
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48 
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<p> 已 经 存在 的 文本 段落 .</p> 
<p> 动 态 追 加 (appendChild) 的 文本 段落 .</p> 
</div> 
«div id="id-div3" class-"css-p"» 
<P> 第 一 段 文本 段落 .</P> 
<p> 动 态 插 入 (ànsertAfter) 的 文本 段落 .</p> 
<p> 第 三 段 文 本 段落 .</p> 
</div> 
«input type-"button" onclick-"on removeChild p();" value=" 动 态 删除 文本 段落 "/> 
«input type-"button" onclick-"on remove p();" 
value=" 动 态 删 除 (remove) 文本 段落 "/> 
«input type-"button" onclick-"on removeChild all p();" 
value=" 动 态 删除 全 部 文本 段落 "/> 
</body> 
«script type-"text/javascript"» 
function on removeChild p() { 
var id divl - document.getElementById ("id-div1"); 
var child p - id divl.childNodes; 
id divl.removeChild(child p[0]); 
) 
function on remove p() { 
var id div2 = document.getElementById ("id-div2"); 
var child p - id div2.childNodes; 
id div2.remove (child p); 
) 
function on removeChild all p() { 
var id div3 - document.getElementById ("id-div3"); 
var child p - id div3.childNodes; 
for (var i - child p.length - 1; i »- 0; i--) f 
id div3.removeChild(child p[il); 


} 
«/script» 
«/html» 


天 于 【代码 3-7】 的 说 明 : 


第 13-24 行 代 码 分 别 通过 标签 <div> 定 义 3 个 层 对 象 ， 并 通过 手动 方式 定义 多 个 文本 段落 ， 
最 终 显示 成 如 图 3.6 中 操作 后 的 页 面 效果 (大致 方 向 就 是 将 图 3.6 中 的 效果 进行 逆向 操作 ). 
第 30-34 行 代 码 定义 的 函数 实现 了 动态 删除 文本 段落 的 操作 。 其 中 ， 第 32 行 代码 通过 
childNodes 属性 获取 了 第 一 个 层 (<div id="id-div1" ) 中 的 全 部 段落 <p> 节 点 的 集合 (child p), 
第 33 行 代码 通过 removeChild() 方 法 删除 了 该 文本 段落 。 注 意 ， 删 除 时 必须 使 用 数组 下 标的 
方式 (child_p[0] )， 而 直接 删除 集合 (child p) 对 象 是 无 效 的 。 


50 | _ Javascript+Vue+React 全 程 实例 


e 那么 能 不 能 直接 删除 集合 (child p) tAE? 第 35-39 行 代 码 定义 的 函数 实现 了 直接 删除 集 
A (child p) 对 象 的 操作 ， 不 过 这 里 要 使 用 remove() 方 法 来 操作 。 

e 第 40~46 行 代码 定义 的 函数 演示 了 常规 删除 多 个 文本 段落 的 操作 , 主要 就 是 通过 for 循环 语 
名 依次 调用 removeChild() 方 法 来 删除 每 一 个 文本 段落 。 这 里 要 特别 注意 的 是 ，for 循环 语句 
迁 代 的 方式 从 大 到 小 ， 因 为 如 果 人 迭代 顺序 是 从 小 到 大 ， 那 么 每 次 删除 操作 后 集合 (child p) 
对 象 的 数组 下 标 就 会 发 生 改 变 ， 从 而 导致 删除 操作 无 法 完成 。 


3.8 动态 人 答 换 段 洛 的 文本 内 容 


前 面 两 节 分 别 介 绍 了 动态 创建 和 删除 文本 段落 的 方法 ， 本 节 上 再 介绍 一 下 如 何 动 态 蔡 换文 本 内 
容 的 方法 。 动 态 蔡 换文 本 内 容 主 要 是 通过 innerText 属性 或 innerHTML 属性 来 实现 的 。 其 中 ， 
innerText 属性 主要 用 来 操作 纯 文 本 ; innerHTML 属性 既 可 以 用 来 操作 文本 , 也 可 以 用 来 操作 HTML 
代码 。 

下 面 给 出 一 个 JavaScript 通 过 innerText 属性 和 innerHTML 属性 动态 蔡 换 文本 内 容 的 代码 实例 。 


【代码 3-8】( 详 见 源 代码 目录 ch03-js-replace-p.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
«1-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 控制 DOM - 动态 蔡 换 段 落 的 文本 内 容 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div" class-"css-p"» 
<p> 文 本 段落 的 原始 内 容 .</p> 
<p> 文 本 段落 的 原始 内 容 .</p> 
</div> 
«input type-"button" id-"id-replace-p" onclick-"on replace p();" 
value=" 动 态 痊 换文 本 内 容 "/> 
</body> 
<script type="text/javascript"> 
function on replace p() { 


var id p = document.getElementsByTagName ("p"); 
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22 id p[0].innerText = "文本 段落 动态 葵 换 的 内 容 ."; 
23 id p[1].innerHTML = "<b> 文 本 段落 动态 普 换 的 内 容 .</b>"; 


24 } 
25 </script> 
26 </html> 


关于 【代码 3-8】 的 说 明 : 


o 第 22 行 代码 通过 使 用 innerText 属性 动态 替换 了 第 14 行 代 码 中 定义 的 段落 中 的 文本 内 容 。 
e 第 23 行 代码 通过 使 用 innerHTML 属性 动态 替换 了 第 15 行 代码 中 定义 的 段落 中 的 文本 内 容 。 
注意 ， 这 里 在 使 用 innerHTML 属性 时 加 入 了 HTML 代码 (<b> ) 实现 字体 加 粗 的 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.7 所 示 。 


El JavaScript 全 程 实例 — E B El JavaScript 全 程 实例 
^ CQ | © localhost:633: -U7 >» ( > @ |© localhost633- epo» 


JavaScript 控制 DOM - 动态 蔡 换 段落 的 文本 内 容 JavaScript 控制 DOM - 动态 蔡 换 段落 的 文本 内 容 


3.77 JavaScript 动态 替换 段落 的 文本 内 容 


3.9 如 何 主动 触发 按钮 单 击 事件 


众所周知 ， 页 面 中 设计 的 按钮 控件 是 为 了 让 用 户 单 击 来 触发 操作 的 ， 那 么 能 不 能 直接 通过 
JavaScript 脚本 语言 从 后 台 主 动 触发 按钮 来 操作 呢 ? 答案 是 肯定 的 。 
下 向 实现 一 个 JavaScript 主动 触发 按钮 单 击 事件 的 代码 实例 。 


【代码 3-9】( 详 见 源 代码 目录 ch03-js-btn-click.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 


<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 

</head> 

<body> 


52 


08 
09 
10 
TE 
12 
13 


14 


15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
zy 
28 
29 
30 
zh 
32 


| JavaScript Vue-React 全 程 实例 


«1-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 控制 DoM - 主动 触发 按钮 单 击 事件 </nav> 
</header> 
«1-- 添加 文档 主体 内 容 --> 
<p>First Name: <input type="text" name="fname" id="id-fname" 
value="King" /></p> 
<p>Last Name: «input type-"text" name-"lname" id-"id-lname" 
value-"Wang" /></p> 
«input type="button" id-"id-btn-name" value=" 用 户 触发 按钮 " /> 
«input type="button" id="id-btn-click" value=" 主 动 触发 按钮 " /> 
</body> 
«script type-"text/javascript"» 
var v btn name - document.getElementById ("id-btn-name"); 


v btn name.onclick = function () { 


var id fname = document.getElementById ("id-fname"); 


var id lname = document.getElementById ("id-lname"); 
var full name = id fname.value + " " + id lname.value; 
console.log("Full Name : " + full name); 
}; 
var v btn click = document.getElementById ("id-btn-click"); 
v btn click.onclick = function () ( 
console. log ("EDARIA : "); 
document.getElementById ("id-btn-name").click(); 
}; 
«/script» 
«/html» 


关于 【代码 3-9】 的 说 明 : 


e 第 15 行 代码 通过 标签 <inpu 人 定义 了 第 一 个 按钮 控件 ; 第 20 ~25 行 代码 为 该 按钮 控件 添加 了 


onclick 事件 ， 获 取 了 第 13-14 行 代 码 定 义 的 文本 框 中 的 内 容 。 注 意 ， 该 按钮 的 单 击 事件 是 
必须 由 用 户 执行 触发 操作 来 完成 的 。 


o 第 16 行 代码 通过 标签 <input> 定 义 了 第 二 个 按钮 控件 ; 第 27 ~ 30 行 代码 为 该 按钮 控件 添加 了 


onclick 事件 , 其 中 第 29 行 代 码 通 过 为 第 一 个 按钮 控件 执行 click() 方 法 来 执行 单 击 操作 ,注意 ， 
里 第 一 个 按钮 控件 的 单 击 操作 是 JavaScript 主动 触发 的 ， 而 不 是 由 用 户 被 动 触发 的 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.8 和 图 3.9 所 示 。 
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JavaScript 全 程 实例 —— 4 | Eg] Javascript 全 程 实例 


Q! | © localhost:6 yv eee ^ C | © localhost:6 


JavaScript 控制 DOM - 主动 触发 按钮 单 击 事件 JavaScript 控制 DOM - 主动 触发 按钮 单 击 事件 


First Name: King First Name: King 


Last Name: Wang Last Name: Wang 


— [Wd  Clinspecto f Console D Debugger » Ø] = X 
E] Console © Debugger » 上 日 … X 


WM Y Fiteroutp [F] Persist Logs 
主动 触发 按钮 : che3-js-btn-click.html:37:9 
che3-js-btn-click.html:33:9 Full Name : King Wang che3- s-btn-click.html:33:9 


Persist Logs 


3.8 JavaScript 用 户 触发 按钮 单 击 事件 É3.9 JavaScript 主动 触发 按钮 单 击 事件 


3.10 ”动态 修改 元 素 属性 值 


在 前 面 的 章节 中 介绍 了 如 何 遇 爵 元 素 的 全 部 属性 ， 本 节 将 在 此 基础 上 介绍 如 何 动态 修改 元 素 
的 属性 值 。 下 面 实现 一 个 JavaScript 动态 修改 元 素 属性 值 的 代码 实例 。 


【代码 3-10】( 详 见 源 代码 目录 ch03-js-modify-attributes.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 控制 DOM - 动态 修改 元 素 属性 值 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<p>Modify Attributes: 
<input type="text" class="css" name="name" id="id-name" value="King"/> 
«/p» 
«input type="button" onclick-"on get attr();" value=" 获 取 标 签 的 全 部 属性 "/> 
«input type-"button" onclick-"on modify attr();" 
value=" 修 改 标签 的 全 部 属性 "/> 
</body> 
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«script type-"text/javascript"» 


function on modify attr() { 


var input - document.getElementsByTagName ("input"); 
var attrs input[0].attributes; 
console.log("modify input's all attributes --- "); 
var new attrs - ["password", "newCSS", "pwd", "id-pwd", "123456"]; 
for (var i = 0; i < attrs.length; itt) f 
attrs[i].value = new attrs[il; 
} 
for(var j = 0; < attrs.length; ITFI) ( 
console.log("attr name : " + attrs[j].name + ", value : 
attrs[j]l.value); 


} 
ecf5ecripb* 
«/html» 


关于 【代码 3-10】 的 说 明 : 

e 第 14 行 代码 通过 标签 <inpu 仿 定义 了 一 个 文本 框 ， 并 定义 了 type="text" 、class="css"、 
name="name"、id="id-name" 和 value="King" 这 几 个 属性 。 

e 第 16 行 和 第 17 行 代码 分 别 定 义 了 两 个 按钮 控件 : 第 一 个 按钮 控件 用 于 获取 文本 框 ( 在 第 14 
行 代码 中 定义 ) 的 全 部 原始 属性 ， 第 二 个 按钮 控件 用 于 动态 修改 该 文本 框 的 全 部 属性 。 

o 第 20~31 行 代码 定义 的 函数 实现 了 动态 修改 文本 框 全 部 属性 的 操作 。 其 中 ， 第 24 行 代码 定 
义 的 数组 包括 了 全 部 新 的 属性 值 ， 比 较 有 意思 的 是 将 文本 框 类 型 (type="text" ) 修改 为 了 密 
码 框 类 型 (type="password" ), 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.10 所 示 。 


El JavaScript 全 程 实例 | E] JavaScript 全 程 实例 


Œ © localhost:63342 Q | (D localhost:6334: 
JavaScript 控制 DOM - 动态 修改 元 素 属性 值 


Modify Attributes: King 


[W  Clinspector ŒI Console CO Debugger. » 


[^] Persist Logs 
print input's all attributes --- --modify-attributes.html:35:9 modify input's all attributes --- --modify-attributes.html:46:9 
attr name : type, value : text -modify-attributes.html:37:13 attr name : type, value : password  — .modify-attributes.html:52:13 
attr name : class, value : css -modify-attributes.html:37:13 attr name : class, value : newCS5 -modify-attributes.html:52:13 
attr name : name, value : name -modify-attributes.html:37:13 attr name : name, value : pwd .modify-attributes.html:52:13 
attr name : id, value : id-name -modify-attributes.html:37:13 attr name : id, value : id-pwd .modify-attributes.html:52:13 
attr name : value, value : King -modify-attributes.html:37:13 attr name : value, value : 123456 .modify-attributes.html:52:13 


图 3.10 JavaScript 动态 修改 元 素 属 性 值 
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3.11 如 何 获取 下 拉 列 表 的 选项 


一 般 来 讲 ， 获 取 下 拉 列 表 的 选项 主要 是 通过 selectIndex 属性 来 操作 的 ， 其 实 还 有 一 个 index € 
引 属性 也 可 以 实现 该 操作 。 本 节 就 分 别 介 绍 如 何 通过 这 两 个 属性 来 获取 下 拉 列 表 的 选项 (包括 获取 
索引 和 文本 值 ) 。 

首先 ， 介 绍 一 个 JavaScript 通过 selectIndex 属性 获取 下 拉 列 表 选 项 的 代码 实例 。 


【代码 3-11】( 详 见 源 代码 目录 ch03-js-select-selectlndex.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
«nav»JavaScript 控制 DOM - 获取 下 拉 列 表 的 选项 (selectIndex)</nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<p>Lang: &nbsp; &nbsp; 
«select id-"id-select-lang"» 
«option»CH«/option» 
«option»EN«/option» 
«option»FR«/option» 
«option»GE«/option» 
«option»RU«X/option» 
«option»HK«/option» 
«/select» 
«/p» 
«input type-"button" onclick-"on get selIndex();" 
value=" 获 取 下 拉 列 表 选 项 索引 "” /> 
</body> 
«script type-"text/javascript"» 
function on get selIndex() { 
var i = document.getElementById ("id-select-lang").selectedIndex; 
var o document.getElementById ("id-select-lang").options[i]; 
console.log("select index : " c i-* "."- "select text : " + o.text); 
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31 «/script» 


32 </html> 


关于 【代码 3-11】 的 说 明 : 

e 第 14~21 行 代码 通过 标签 <select> 定 义 了 一 个 下 拉 菜 单 ， 并 添加 了 一 组 选项 。 

e 5 26-30 行 代码 定义 的 函数 实现 了 通过 selectIndex 属性 操作 下 拉 菜 单 选项 的 功能 。 其 中 ， 
第 27 行 代码 通过 selectIndex 属性 获取 了 下 拉 菜 单 选项 的 索引 , 第 28 行 代码 通过 集合 options 
对 象 获取 了 索引 值 对 应 的 下 拉 菜 单 选项 , 第 29 行 代码 通过 text 属性 在 浏览 器 控制 台中 输出 了 
下 拉 菜 单 选项 的 文本 内 容 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 3.11 所 示 。 


Eg JavaScript 全 程 实例 


€ — C! |© localhost63342 


JavaScript 控制 DOM - 获取 下 拉 列 表 的 选项 
(selectIndex) 


Lang: EN v 
获取 下 拉 列 表 选 项 索引 


[wm  Clinspetor E] Console CO Debugger » B] e X 


B Ww Fiteroutput [7] Persist Logs 
select index : e. select text : CH -select-selectIndex.html:38:9 
select index : 1. select text : EN -Select-selectIndex.html:38:9 


3.11 JavaScript 获取 下 拉 列 表 的 选项 (selectIndex) 
下 面 ， 再 介绍 一 个 JavaScript 通过 index 属性 获取 下 拉 列 表 选 项 的 代码 实例 。 


【代码 3-12】( 详 见 源 代码 目录 ch03-js-select-index.html 文件 ) 


01 <script type="text/javascript"> 
02 function on get sel index() { 
03 var i = document .getElementById("id-select-lang") .selectedIindex; 
04 var options = document .getElementsByTagName ("option"); 
05 console.log("select index : " + options[i].index + "." + 
" select text : T + options[i].text); 
06 } 
07 «/script» 


关于 【代码 3-12】 的 说 明 : 


@ 本 代码 是 在 【代码 3-11]】 的 基础 上 修改 而 成 的 ， 主 要 区 别 就 是 在 第 05 行 代 码 中 使 用 index 属 
性 获取 了 下 拉 菜 单 选 项 的 索引 值 。 
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读者 可 以 自行 测试 一 下 该 代码 实例 ， 与 【代码 3-11】 的 效果 是 完全 一 致 的 。 
3.12 ”实现 电话 挨 号 键盘 


前 面 简单 介绍 了 如 何 使 用 下 拉 沫 单 选项 的 index 属性 ， 其 实 index 属性 还 可 以 用 于 控制 同 级 的 
多 个 同类 控件 ， 比 如 常见 的 按钮 控件 。 对 于 同 级 的 多 个 按钮 控件 ， 可 以 用 index 属性 作为 按钮 的 索 
引 ， 以 区 分 多 个 同 级 按钮 。 

下 面 给 出 一 个 通过 使 用 多 个 同 级 按钮 控件 并 借助 index 属性 实现 电话 拨号 键盘 的 JavaScript fX 
人 码 实例 。 


【代码 3-13】( 详 见 源 代码 目录 ch03-js-btn-telphone.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实 例 </tit1le> 

«/head» 

«body» 

<!-- 添加 文档 主体 内 容 --> 

«header» 
«nav»JavaScript 控制 DOM - 实现 电话 拨号 键盘 </nav> 

</header> 

<!-- 添加 文档 主体 内 容 --> 

<div class="css-div-button"> 
<button>1</button> 
<button>2</button> 
<button>3</button><br> 
<button>4</button> 
<button>5</button> 
<button>6</button><br> 
<button>7</button> 
<button>8</button> 
<button>9</button><br> 
<button>*</button> 
<button>0</button> 
<button>#</button><br> 
«input type="text" id-"id-input-tel" readonly /> 

«/div» 

«/body» 

<script type-"text/javascript"» 
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window.onload = function () { 
var arrTel [fm mm mam a: a  wEn TERMIN In "RU onum, mm. 
aia a 
var arrBtn = document.getElementsByTagName ('button'); 
var tel = document.getElementById("id-input-tel"); 
for (var i = 0; i < arrBtn.length; itt) f 
arrBtn[i].index = i; 
arrBtn[i].onclick - function () i 
tel.value += arrTel[this.index]; 
}; 


}; 


«/script» 
</html> 


关于 【代码 3-13】 的 说 明 : 


e 第 14~25 行 代码 通过 一 组 <button> 按 钮 控件 实现 了 一 个 电话 拨号 键盘 ( 包括 0~9 数 字 键 、“*” 
键 和 WP Bb). 

第 26 行 代码 定义 了 一 个 文本 框 (只 读 )， 用 于 显示 电话 号 码 。 

第 31 行 代码 定义 了 一 个 数组 ， 包 含 了 电话 拨号 键盘 的 数字 和 字符 . 

第 32 行 代 码 获取 了 全 部 <burron> 按 钮 控件 的 对 象 集合 (arrBtn ). 

第 34~ 39 行 代码 通过 for 循环 语句 遍历 了 全 部 按钮 控件 的 对 象 集合 (anBtn), 其中， 第 35 
行 代 码 为 每 一 个 按钮 对 象 的 index 属性 定义 了 索引 值 AREI) 第 36 ~38 行 代码 为 每 一 个 
按钮 对 象 定义 了 onclick 事件 处 理 方法 ， 用 于 将 用 户 的 拨号 操作 显示 在 第 26 行 代 码 定 义 的 只 
读 文 本 框 中 。 


FAEH Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 3.12 所 示 。 
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3.12 JavaScript 实现 电话 拨号 键盘 


第 4 章 按钮 特效 


本 章 介绍 如 何 通 过 JavaScript 来 实现 各 种 按钮 特效 ， 通 过 这 些 特 效 来 丰富 HTML 文档 的 设计 
手段 和 页 面 效果 。 


4.1 按钮 概述 


HTML 语法 规范 中 定义 ， 可 以 使 用 <input type="button|submitlreset"> 标 签 来 定义 按钮 (按钮 | 提 
交 | 重 置 ) ,或 者 直接 使 用 <button> 标 签 可 以 定义 按钮 ， 目 前 几乎 所 有 的 主流 浏览 器 均 文 持 这 两 种 定 
义 方式 。 

在 具体 应 用 时 ， 这 两 种 定义 方式 还 是 略 有 区 别 的 。<input type="button|submitlreset"> 标 签 的 浏 
览 器 兼容 性 比 <button> 标 签 更 好 一 些 ，<button> 标 签 在 IE 浏览 器 和 非 IE 浏览 器 中 会 有 所 区 别 〈 当 
然 现在 绝 大 部 分 用 户 都 没 在 使 用 IE 浏览 器 了 ) 。 

当然 任何 事情 都 是 有 利 有 弊 的 , «button? FAS THX] T «input type="button|submitlreset"> 标 签 提供 
了 更 为 强大 的 功能 和 更 丰富 的 内 容 。 在 <button></button> 标 签 之 间 ， 设 计 人 员 可 以 放置 文本 、 图 像 
和 多 媒体 等 内 容 ， 这 点 是 <input type="buttonlsubmitlreset"> 标 签 所 不 有 具备 的 功能 。 

HTML 语法 规范 为 按钮 对 象 定 义 了 一 组 事件 方法 (比如 : 单 击 事 件 和 焦点 事件 ), 通过 JavaScript 
脚本 语言 可 以 对 这 些 事件 进行 编程 控制 ， 实 现 更 为 强大 的 页 面 功能 。 同 时 ， 通 过 JavaScript 脚本 语 
言 还 可 以 控制 按钮 的 CSS 样式 代码 ， 进 而 展现 出 更 为 丰富 的 页 面 特效 。 


4.2 ”为 按钮 添加 背景 闫 色 


在 HTML DOM 对 象 中 ， 定 义 有 一 个 Style 对 象 ， 用 于 表示 风格 样式 ， 绝 大 多 数 的 页 面 元 素 均 
可 以 通过 该 对 象 来 定义 风格 样式 。 在 Style 对 象 中 ， 定 义 了 一 个 backgroundColor EIE, RIRIA 
BH EE. WRK backgroundColor 属性 应 用 于 按钮 <button> 元 素 ， 就 可 以 为 按钮 控件 添加 各 种 
ERIE D. 

下 面 简单 介绍 一 个 JavaScript 通过 backgroundColor 属性 为 按钮 控件 添加 背景 颜色 的 代码 实例 。 


【代码 4-1】( 详 见 源 代码 目录 ch04-js-btn-backgroundColorhtml 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 


<!-- 添加 文档 头 部 内 容 --> 
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«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 按钮 特效 - 为 按钮 添加 背景 颜色 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div class-"css-div-button"» 
«button»Red«/button» 
«button»Yellow«c/button» 
«button»Blue«/button» 
«/div» 
</body> 


<script type="text/javascript"> 


var colorBtn = ["red", "yellow", "blue"]; 
var arrBtn = document.getElementsByTagName ("button"); 
for(var i=0; i«arrBtn.length; i--*) 1 
arrBtn[i].style.backgroundColor = colorBtn[i]; 
} 
«/script» 
«/html» 


关于 【代码 4-1】 的 说 明 : 

e $14- 16 行 代码 通过 <button> 标 签 定义 一 组 按钮 ， 后 面 将 为 这 组 按钮 定义 不 同 的 背景 颜色 。 

第 20 行 代码 定义 了 一 个 数组 (colorBtn )， 分 别 定 义 了 3 种 颜色 ("red"，"yellow" 和 "blue" ), 

第 21 行 代 码 获取 了 按钮 对 象 集合 (arrBtn ). 

第 22 ~ 24 行 代码 通过 一 个 for 语句 依次 为 按钮 对 象 (arrBtn[i] ) 定义 背景 颜色 (colorBtn[i] ), 
具体 就 是 通过 Style 对 象 的 backgroundColor 属性 来 操作 的 。 


由 于 书籍 印刷 的 原因 ， 这 里 就 不 给 出 页 面 效果 图 了 。 按 钮 控件 的 背景 颜色 效果 ， 读 者 可 以 目 
行 运行 源 代码 测试 查看 。 


4.3 不 同 按钮 提交 到 不 同 的 表单 地 址 


对 于 HTML DOM 对 象 中 的 表单 <form> 元 素 而 言 ， 一 个 表单 只 能 提交 到 一 个 由 action 属性 定 
义 的 服务 器 疹 页 面 上 ， 因 为 action 属性 就 只 能 定义 一 个 url 链接 地 址 。 那 么 能 不 能 通过 JavaScript 
实现 一 个 表单 提交 到 不 同 服务 器 端 地 址 页 面 上 去 呢 ? 答案 是 肯定 的 ,通过 在 表单 中 定义 多 个 按钮 就 
可 以 实现 提交 到 不 同 表 单 地 址 的 功能 。 

下 面 就 介绍 一 个 通过 JavaScript 实现 不 同 按钮 提交 到 不 同 表单 地 址 的 代码 实例 。 
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【代码 4-2】( 详 见 源 代码 目录 ch04-js-btn-multiForm.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 不 同 按钮 提交 到 不 同 表 单 地 址 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 «form name-"formMulti" method="get" enctype-"multipart/form-data" 


action-""» 


14 «p»First Name:&nbsp;&nbsp;«input type="text" name-"fname" 
value-"King"/»«/p» 

15 <p>Last Name:&nbsp;&nbsp;«input type="text" name-"lname" 
value-"Wang"/»«/p» 

16 «button type="submit" name-"btnCh" onclick-"submit ch();"» 
提交 (CH) «/button» 

17 «button type-"submit" name-"btnEn" onclick-"submit en();"» 
提交 (EN) «/button» 

18 </form> 

19 </body> 

20 «script language-"javascript"» 

"i function submit ch() { 

22 document.formMulti.action = "multiForm-ch.php"; 

23 document.formMulti.submit(); 

24 } 

2 function submit en() { 

26 document.formMulti.action - "multiForm-en.php"; 

21 document.formMulti.submit(); 

28 } 

29 «/script» 

30 «/html» 


关于 【代码 4-2】 的 说 明 : 

e 第 13~18 行 代码 通过 <form> 标 签 定 义 一 个 表单 ， 其 中 的 action 属性 没有 定义 具体 属性 值 。 

e 第 16~17 行 代码 通过 <button type="submit"> 标 签 定义 了 两 个 按钮 控件 ， 并 分 别 定义 了 不 同 的 
onclick 事件 处 理 方法 ( submit ch()、submit en() )， 用 于 实现 提交 到 不 同 的 表单 地 址 的 操作 。 
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e 第 21~24 行 代码 是 submit ch() 方 法 的 实现 过 程 ， 第 22 行 代码 通过 action 属性 定义 了 表单 提 
交 的 服务 器 端 PHP 页 面 (multiForm-ch.php )， 第 23 行 代码 通过 调用 submit() 方 法 实现 提交 表 
单 的 操作 。 

e 同样 的 ， 第 25 ~ 28 行 代码 是 submit en() 方 法 的 实现 过 程 ， 以 及 表单 提交 的 服务 器 端 PHP 页 
面 (multiForm-ch.php )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.1 和 图 4.2 所 示 。 


JavaScript 全 程 实例 X — UMEN localhost9090/js-tot: X ag - 
€ 一 G ©) local! ese (v » = > € ®© local" 


Name : Wang King. 
不 同 按钮 提交 到 不 同 表单 地 址 
First Name: King 


Last Name: Wang 


表单 提交 地 址 : multiForm-ch.php 


图 4.1 JavaScript 不 同 按钮 提交 到 不 同 的 表单 地 址 (一 ) 


如 图 4.1 所 示 ， 第 一 个 提交 按钮 将 表单 提交 到 服务 器 端 PHP 页 面 《multiForm-ch.php) ， 页 面 
中 显示 出 了 中 文 习 惯 的 名 字 。 


= PE 
JavaScript 全 程 实例 — X [OCR localhost9090/js-tot: X Mam us 


€ )- C |© local e G» €) Œ |© local 
Name : King Wang. 
不 同 按钮 提交 到 不 同 表单 地 址 — 


First Name: King 


Last Name: Wang | 表单 提交 地 址 : multiForm-en.php 


42 JavaScript 不 同 按 钮 提交 到 不 同 的 表单 地 址 (二) 


如 图 4.2 所 示 ， 第 二 个 提交 按钮 将 表单 提交 到 服务 器 冰 PHP 页 面 (multiForm-en.php) ， 页 面 
中 显示 出 了 英文 习惯 的 名 字 。 


4.4 ”避免 回 车 键 目 动 提交 表单 


一 般 情 况 下 ， 如 果 在 一 个 表单 中 只 定义 了 一 个 submit 类 型 的 提交 按钮 ， 那 么 当 用 户 在 表单 输 
入 完 后 按 下 回 车 键 (Enter) 就 可 以 实现 表单 的 提交 操作 。 不 过 在 有 些 情况 下 ， 这 种 看 似 便捷 的 功 
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能 也 会 带 来 不 必要 的 烦恼 ， 那 就 是 如 果 用 户 进 行 了 误 操 作 (在 还 没有 输入 完 表 单 的 情况 下 ,就 误 按 
回 车 键 提 交 了 表单 ) 怎么 办 ? 这 个 时 候 就 需要 通过 JavaScript 来 禁用 回 车 键 (Enter) 功能 了 。 


【代码 4-3】( 详 见 源 代码 目录 ch04-js-form-no-enter.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
TT 
12 
13 
14 


19 


16 
17 
18 
13 
20 
21 
22 
23 
24 
29 
26 
"A 
28 
29 
30 


<!doctype html> 
<html lang="en"> 
<head> 


<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 避 人 免 回 车 键 自动 提交 表单 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 
«form name-"formNoEnter" method="get" action-"form-no-enter.php"» 
«p»First Name: «input type="text" name-"fname" id-"id-fname" 
value-"King"/»«/p» 
X«p»Last Name: «input type="text" name-"lname" id-"id-lname" 
value-"Wang"/»«/p» 
«button type="submit" id="id-submit"> 提 交 表 单 </button> 
«/form» 
</body> 
<script type="text/javascript"> 


window.onload = function () { 
document.formNoEnter.onkeypress = function (ev) { 
var ev - window.event || ev; 
if (ev.keyCode == 13 || ev.which == 13) ( 
console.log("Info : press enter no submit."); 
return false; 
} 
| 
} 
</script> 
</html> 


关于 【代码 4-3】 的 说 明 : 
e 第 13-17 行 代 码 通 过 <form> 标 签 定义 一 个 表单 (formNoEnter )， 同 时 定义 了 action 属性 


( form-no-enter.php )。 其 中 ， 第 16 行 代码 通过 <button type="submit"> 标 签 定 义 了 一 个 提交 按 
钮 ; 表单 中 如 果 定 义 了 该 submit 类 型 的 按钮 ， 如 果 不 对 回 车 键 (Enter) 进行 屏蔽 处 理 的 话 ， 
那么 当 用 户 按 下 回 车 键 后 ， 默 认 就 会 执行 提交 表单 的 操作 (读者 可 以 自行 测试 一 下 )。 
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e 第 21~27 行 代码 为 表单 (formNoEnter ) 定义 了 按 下 按键 onkeypress 事件 处 理 方法 。 其 中 ， 
第 23 行 代 码 通过 判断 回 车 键 ( Enter) 按键 ASCII 编码 (13) 来 屏蔽 用 户 操作 ， 这 里 要 注意 
浏览 器 兼容 性 代码 的 写法 ; 如 果 判 断 结果 为 “ 真 ”, 就 在 浏览 器 控制 台中 输出 一 行 提示 信息 (第 
24 行 代码 )， 并 通过 返回 false 来 屏蔽 按键 操作 (第 25 行 代码 ). 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.3 所 示 。 
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避免 回 车 键 自动 提交 表单 


First Name: King 


Last Name: Wang 
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WI Y Filter output [F] Persist Logs 
Info : press enter no submit. .form-no-enter.html:33:17 
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图 4.3 JavaScript 避免 回 车 键 目 动 提交 表单 


如 图 4.3 中 箭头 所 示 ， 当 用 户 按 下 回 车 键 (Enter) 后 ， 表 单 提 交 操 作 没 有 生效 ， 而 在 浏览 器 
控制 台中 显示 了 第 24 行 代码 定义 的 提示 信息 。 


4.5 ”按钮 在 单 击 后 目 动 失效 


ERE HTML 页 面 应 用 中 ， 可 能 需要 实现 按钮 在 单 击 一 次 后 就 目 动 失效 的 效果 ， 通 过 设置 近 
钮 控件 的 disabled 属性 就 可 以 实现 该 功能 。 下 面 给 出 一 个 通过 JavaScript 实现 按钮 在 单 击 后 目 动 失 
效 的 代码 实例 。 


【代码 4-4】( 详 见 源 代码 目录 ch04-js-btn-click-once.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 


<header> 
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10 <nav> 按 钮 在 单 击 后 自动 失效 </nav> 

11 «/header» 

12 ”<!-- 添加 文档 主体 内 容 --> 

13 <div> 测 试 按钮 : 

14 «button id-"id-click-once"»Click Once«c/button» 
15 «/div» 

16 ”<div> 重 新 激活 : 

I7 <button id="id-re-active">Re-Active</button> 
18 </div> 


19 </body> 
20 <script type="text/javascript"> 


21 document.getElementById("id-click-once").onclick = function (e) { 
ze e.target.disabled - true; 

23 }; 

24 document.getElementById("id-re-active").onclick = function (e) { 
Z5 document.getElementById ("id-click-once").disabled = false; 

26 lg 

2] */scoripb» 

28 «/html» 


关于 【代码 4-4】 的 说 明 : 
e 第 14 行 和 第 17 行 代码 通过 <button> 标 签 分 别 定 义 了 两 个 按钮 ， 第 一 个 按钮 
( id-"id-click-once" ) 用 于 测试 在 单 击 后 自动 失效 的 功能 ， 第 二 个 按钮 (id="id-re-active" ) 用 

于 重新 激活 第 一 个 按钮 。 

e $ 21-23 行 代码 为 第 一 个 按钮 定义 了 _ onclick 事件 处 理 方法 ， 其 中 第 22 行 代码 通过 设 定 
disabled 属性 (=true ) 让 该 按钮 失效 。 

e 第 24-26 行 代码 为 第 二 个 按钮 定义 了 _ onclick 事件 处 理 方 法 ， 其 中 第 25 行 代码 通过 设 定 
disabled 属性 (=false ) 让 第 一 个 按钮 重新 被 激活 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.4 所 示 。 
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44 JavaScript 控制 按钮 在 单 击 后 自动 失效 


如 图 4.4 中 箭头 所 示 ， 当 用 户 按 下 第 一 个 按钮 (Click Once) 后 ， 该 按钮 就 自动 失效 了 。 用 户 
可 以 通过 第 二 个 按钮 (Re-Active) 再 次 激活 第 一 个 按钮 。 
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4.6 为 删除 功能 按钮 添加 确认 提醒 


一 般 情 况 下 ， 删 除 操作 都 是 一 种 风险 比较 大 的 行为 ， 所 以 设计 人 员 一 般 都 会 为 删除 功能 添加 
上 一 个 再 次 确认 提醒 的 功能 。 在 HTML DOM 对 象 中 定义 有 一 个 Window《〈 窗 体 ) 对 象 ， 该 对 象 中 
定义 了 一 个 confirm() 方 法 ， 用 于 显示 一 个 融 有 指定 消息 并 市 有 OK 按钮 及 取消 按钮 的 对 话 框 (一 
般 称 为 确认 对 话 框 〉。 

下 面 介绍 一 个 JavaScript 通过 confirm() 方 法 为 删除 按钮 添加 确认 提醒 功能 的 代码 实例 。 


【代码 4-5】( 详 见 源 代码 目录 ch04-js-btn-confirm.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 为 删除 功能 按钮 添加 确认 提醒 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<button id="id-btn-confirm"> 删 除 按钮 </button> 
<p> 删 除 按钮 --- 删除 内 容 </p> 
</body> 
«script type-"text/javascript"» 
document.getElementById("id-btn-confirm").onclick - function (e) 
if(confirm("Please confirm to del ?")) 1 


document.getElementsByTagName ("p") [0].innerText - 


}; 
«/script» 
«/html» 


关于 【代码 4-$】 的 说 明 : 

e 第 13 行 代码 通过 <button id="id-btn-confirm"> 标 签 定义 一 个 按钮 ， 用 于 删除 第 14 行 代码 定义 
的 <p> 标 签 中 的 内 容 。 

e 217-21 4T4X/ Jj «button id="id-btn-confirm"> 标 签 定 义 了 onclick 单 击 事件 处 理 方 法 , 其 中 ， 
第 18 ~ 20 行 代码 通过 判断 调用 confirm() 方 法 的 返回 值 让 用 户 选 择 是 否 执 行 删除 操作 。 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.5 所 示 。 


| 
JavaScript 全 X 


— C! |© localt 


为 删除 功能 按钮 添加 确认 提醒 


Please confirm to del ? 


图 4.5 JavaScript 为 删除 功能 按钮 添加 确认 提醒 


如 图 4.5 中 篆 头 所 示 ， 当 用 户 按 下 “删除 按钮 ”后 ， 页 面 中 会 先 弹出 一 个 确认 框 ， 然 后 根据 用 
己 的 选择 确认 是 否 删除 内 容 。 


4.7 ”根据 状态 展示 不 同 梓 式 按钮 


在 某 些 HTML 页 面 应 用 中 ， 设 计 人 员 需 要 根据 特定 状态 将 页 面 中 的 按钮 展示 出 不 同 的 风格 ， 
此 时 就 需要 通过 JavaScript 来 动态 改变 按钮 的 样式 。 下 面 给 出 一 个 通过 JavaScript 实现 根据 状态 展 
示 不 同样 式 按钮 的 代码 实例 。 


【代码 4-6】( 详 见 源 代码 目录 ch04-js-btn-status.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
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JavaScript+Vue+React 全 程 实例 


<!-- 添加 文档 主体 内 容 --> 


<header> 


<nav> 根 据 状 态 展示 不 同样 式 按 钮 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div css="css-btn-status"> 
«button id="id-btn-status" style="width:128px;height:32px"> 正 常 状 态 


</button> 


<p> 当 前 的 状态 : </p> 


</div> 
<button 
<button 


«button 
«button 


</body> 


id="id-btn-normal" onclick="on normal status () "> 正常 状态 </button> 
id-"id-btn-running" onclick="on running _ status () "> 运行 状态 
«/button» 
id-"id-btn-stop" onclick-"on stop status () "> 停止 状态 </button> 
id-"id-btn-disable" onclick-"on disable status ()"> 茶 用 状态 
«/button» 


«script type-"text/javascript"» 


var curStatus = ""; 


function on normal status() { 


var v btn - document.getElementById('id-btn-status'); 


v btn.disabled = false; // 恢 复 可 用 状态 
v btn.innerText = "正常 状态 "; 
v btn.style.color - ""; 


v btn.style.fontWeight - ""; 


v btn.style.backgroundColor - ""; 

curStatus = ' 正 常 状态 ' ; // 设 置 正常 状态 显示 值 
var p = document.getElementsByTagName ("p") [0]; 
p.innerHTML = ' 当 前 的 状态 : ' + curStatus; 


) 


function on running status() { 


var v btn - document.getElementById('id-btn-status'); 
v btn.disabled - false; // 恢 复 可 用 状态 

v btn.innerText = "运行 状态 "; 

v btn.style.color = "£fff"; 

v btn.style.fontWeight - "bold"; 

v btn.style.backgroundColor = "#666"; 

curStatus = ' 运 行 状态 '; // 设 置 运行 状态 显示 值 

var p = document.getElementsByTagName ("p") [0]; 
p.innerHTML = ' 当 前 的 状态 : ' + curStatus; 


} 


function on stop status() { 


var v btn - document.getElementById('id-btn-status'); 
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48 v btn.disabled = false; // 恢 复 可 用 状态 

49 v btn.innerText = "停止 状态 "; 

50 v btn.style.color = "£888"; 

SL v btn.style.fontWeight = "bold"; 

52 v btn.style.backgroundColor = "£ccc"; 

53 curStatus = ' 停 止 状态 '; // 设 置 停止 状态 显示 值 
54 var p = document.getElementsByTagName ("p") [0]; 

el p.innerHTML = ' 当 前 的 状态 : ' + curStatus; 

56 } 

97 function on disable _ status () { 


58 var v btn = document.getElementById('id-btn-status'); 


59 v btn.disabled = true; // 设 置 不 可 用 为 true 
60 v btn.innerText = "禁用 状态 "; 


61 v btn.style.color = "j4ccc"; 


62 v btn.style.fontWeight - "normal"; 

63 v btn.style.backgroundColor = "£feee"; 

64 curStatus = ' 禁 用 状态 '，; // 设 置 不 可 用 状态 显示 值 

65 var p = document.getElementsByTagName ("p") [0]; 

66 p.innerHTML = ' 当 前 的 状态 : ' + curStatus;// 显 示 当 前 状态 
67 } 

68 </script> 

69 </html> 


关于 【代码 4-6】 的 说 明 : 


o 第 14 行 代码 通过 <button id="id-btn-status"> 标 签 定义 一 个 按钮 ， 用 于 演示 按钮 的 不 同 状态 。 

o 第 15 行 代码 定义 的 <p> 标 签 用 于 显示 按钮 当前 的 状态 。 

e 第 17~20 行 代码 通过 <button> 标 签 分 别 定 义 了 4 个 按钮 ， 用 于 切换 第 14 行 代码 中 定义 的 
«button id="id-btn-status"> 按 钮 的 状态 。 

e 224-3441. $$ 35-4541. €$ 46-56 41. $$ 51-61 行 代码 分 别 定 义 了 第 17 ~ 20 行 代 码 中 
4 个 按钮 的 onclick 事件 处 理 方法 ,其 中 ,使 用 disabled 属性 定义 按钮 是 否 被 禁用 ,使 用 innerText 
属性 定义 按钮 不 同 状态 下 的 显示 内 容 , 使 用 color、fontWeight 和 backgroundColor 属性 分 别 定 
义 按 钮 不 同 状态 下 的 样式 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.6 所 示 。 
如 图 4.6 中 所 示 ，4 个 页 面 中 分 别 展示 了 按钮 的 4 种 状态 (正常 状态 、 运 行 状态 、 停 止 状态 和 
禁用 状态 )。 
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根据 状态 展示 不 同样 式 按钮 根据 状态 展示 不 同样 式 按钮 


EL | | 
当前 的 状态 : 停止 状态 | 当前 的 状态 : ZARA 


4.6 JavaScript 根据 状态 展示 不 同样 式 按钮 


4.8 ”注册 按钮 倒计时 效果 


相信 大 多 数 读 者 都 遇 到 过 下 面 的 场景 ， 用 户 注册 页 面 中 注册 按钮 是 市 有 倒计时 功能 的 ， 这 样 
用 户 就 必须 要 等 待 倒计时 完成 后 才能 操作 (好 意 提 醒 一 下 用 户 再 次 核对 个 人 信息 是 否 准 确 ) 。 那 么 ， 
这 个 功能 是 如 何 实现 的 呢 ? 还 是 利用 HTML DOM 对 象 中 定义 的 Window (AE) 对 象 。 该 对 象 中 
定义 了 一 个 setInterval(0 方 法 ， 可 以 按照 指定 的 周期 〈 以 坚 秒 计 ) 来 调用 函数 或 计算 表达 式 。 注 意 ， 
这 个 setInterval0) 方 法 会 不 停 地 循环 调用 图 数 ， 直 到 使 用 clearInterval0 方 法 清除 计时 器 或 者 当前 窗 
口 被 关闭 后 才 会 停止。 

下 面 就 介绍 一 个 JavaScript 通过 setInterval() 方 法 实现 具有 倒计时 效果 的 注册 按钮 的 代码 实例 。 


【代码 4-7】( 详 见 源 代码 目录 ch04-js-btn-reg-timer.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 


<!-- 添加 文档 头 部 内 容 --> 


<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 


<header> 


第 4 章 按钮 特效 | 71 


10 <nav> 注 册 按钮 倒计时 效果 </nav> 
11 </header> 
12 <!-- 添加 文档 主体 内 容 --> 
13 «div css-"css-btn-timer"» 
14 <p> 
15 <button id-"id-btn-reg-timer" style-"width:150px; 
height :32px"> 注 册 (剩余 10 $5) «/button» 
16 «/p» 
17 «/div» 
18 «/body» 
19 «script type-"text/javascript"» 
20 var btnRegTimer = null; // 定 时 器 
21 window.onload = function () { 
22 var v btn = document.getElementById ("id-btn-reg-timer"); 
23 v btn.disabled - true; 
24 v btn.innerText = "注册 GER 10$)"; 
25 window.clearInterval(btnRegTimer);  // 取 消 定时 器 
26 var btnRegSec = 10; / /开始 10 秒 倒计时 
21 btnRegTimer = window.setInterval(function () { 
28 if (btnRegSec == 0) { 
29 v btn.disabled - false; 
30 v btn.innerText = "H"; 
31 window.clearInterval(btnRegTimer);  // 取 消 定 时 器 
32 ) else ( 
33 btnRegSec--; // 让 倒计时 秒 数 自 减 
34 v btn.innerText = "注册 (剩余 " + btnRegSec + " 秒 ) "; 
35 } 
36 ), 1000); 
ay }; 
38 «/script» 
39 «/html» 


关于 【代码 4-7】 的 说 明 : 

e 第 15 行 代码 通过 <button id="id-btn-reg-timer"> 标 签 定义 一 个 按钮 ， 用 于 演示 注册 按钮 具有 倒 
计时 效果 。 

o 第 20 行 代码 定义 并 初始 化 了 一 个 空 的 计时 器 (btnRegTimer = null ). 

e 第 21~37 行 代码 定义 了 Window *1 $4 onload 事件 处 理 方法 。 其中， 第 26 行 代码 定义 了 一 
个 用 于 累计 倒计时 时 间 变 化 的 变量 ( btnRegSec )， 并 初始 化 为 10 秒 ; 第 27 ~36 行 代码 通过 
setInterval() 方 法 对 计时 器 (btnRegTimer ) 进行 了 定义 ， 通 过 disabled 属性 来 定义 注册 按钮 

(<button id="id-btn-reg-timer"> ) 的 样式 ， 通 过 innerText 属性 定义 注册 按钮 的 倒计时 文本 内 
容 ( 倒 计时 秒 数 的 变化 )。 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 具体 效果 如 图 4.7 所 示 。 
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注册 按钮 倒计时 效果 注册 按钮 倒计时 效果 


注册 ( 剩余 10 秒 ) | 注册 (剩余 6 秒 ) 
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Cj- ŒO localt 
注册 按钮 倒计时 效果 


”注册 (剩余 0 秒 ) | 


如 图 4.7 中 第 头 所 示 ， 妆 倒计时 完成 后 ， 页 面 中 按钮 的 至 用 状态 被 解除 ， 并 变 为 可 用 状态 。 


4.9 计时 器 按钮 


前 和 面 介绍 了 具有 倒计时 效果 的 注册 按钮 ， 其 实 还 有 一 种 类 似 秒表 计时 器 功能 的 按钮 ， 同 样 是 
通过 JavaScript 计时 器 来 实现 的 。 一 般 来 讲 ， 秒 表 计 时 器 具有 开始 计时 、 暂 停 计时 、 恢 复 计 时 和 停 
止 计时 这 几 个 基本 功能 且 时 间 单 位 显示 到 坚 秒 ， 就 如 同 百 米 竞赛 中 裁判 员 使 用 的 秒表 一 样 。 

下 面 就 具体 介绍 一 个 JavaScript 通过 setInterval() 方 法 实现 具有 计时 器 按钮 功能 的 代码 实例 。 


【代码 4-8】( 详 见 源 代码 目录 ch04-js-btn-timer.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 


«body onload-"init();"» 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 按钮 特效 - 计时 器 按钮 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 
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«div css-"css-btn-timer"» 
«p» 
«button id-"id-btn-timer" disabled> 计 时 器 按钮 (0) EF «/button» 
</P> 
<P> 


«button id-"id-btn-start" onclick-"on start timer () "> 开始 倒计时 
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«/button» 
<button id-"id-btn-pause" onclick-"on pause timer() "> 暂停 倒计时 
«/button» 
«button id-"id-btn-restore" onclick-"on restore timer()"> 恢 复 倒 计时 
«/button» 
«button id-"id-btn-stop" onclick-"on stop timer() "> 停止 倒计时 
«/button» 
«/p» 
«/div» 
</body> 
<script type="text/javascript"> 
var myTimer = null; // TODO: 定义 计时 器 
var mySec = 0; // TODO: 定义 累加 器 


function init() ( 
var v btn - document.getElementById('id-btn-timer'); 
v btn.innerText = "计时 器 按钮 (0) 秒 " ; 
var v btn pause = document.getElementById('id-btn-pause'); 


v btn pause.disabled - true; 


var v btn restore - document.getElementById('id-btn-restore'); 


v btn restore.disabled - true; 
var v btn stop - document.getElementById('id-btn-stop'); 
v btn stop.disabled - true; 
) 
function on start timer() { 
var v btn - document.getElementById('id-btn-timer'); 
var v btn start - document.getElementById('id-btn-start'); 
v btn start.disabled - true; 
var v btn pause - document.getElementById('id-btn-pause'); 
v btn pause.disabled - false; 
var v btn stop - document.getElementById('id-btn-stop'); 
v btn stop.disabled - false; 


window.clearInterval (myTimer); // TODO: 清除 计时 器 
mySec = 0; // TODO: 计时 器 清 零 
myTimer = window.setInterval(function () { 

mySec-t*; // TODO: 计时 器 累加 


v btn.innerText = "计时 器 按钮 (" + mySec/1000 + ")#"; 
ly ib 
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Di } 

S2 function on pause timer() { 

23 var v btn - document.getElementById('id-btn-timer'); 

54 var v btn pause - document.getElementById('id-btn-pause'); 
229 v btn pause.disabled - true; 

56 var v btn restore - document.getElementById('id-btn-restore'); 
57 v btn restore.disabled - false; 

58 window.clearInterval (myTimer); // TODO: 清除 计时 器 

99 } 

60 function on restore timer() { 

61 var v btn = document.getElementById('id-btn-timer'); 

62 var v btn restore = document.getElementById('id-btn-restore'); 
63 v btn restore.disabled = true; 

64 var v btn pause = document.getElementById('id-btn-pause'); 
65 v btn pause.disabled - false; 

66 myTimer = window.setInterval(function () { 

67 mySec-t*; //TODO: 计时 器 累加 
68 v btn.innerText = "计时 器 按钮 (" + mySec/1000 + ") 秒 "; 

69 ), 1); 

70 ) 

Tt function on stop timer() { 

rp. var v btn stop - document.getElementById('id-btn-stop'); 

73 v btn stop.disabled - true; 

74 var v btn start = document.getElementById('id-btn-start'); 
75 v btn start.disabled - false; 

76 var v btn pause - document.getElementById('id-btn-pause'); 
77 v btn pause.disabled - true; 

78 var v btn restore = document.getElementById('id-btn-restore'); 
+9 v btn restore.disabled = true; 

80 window.clearInterval (myTimer); // TODO: 清除 计时 器 
81 mySec - 0; // TODO: 计时 器 清 零 
82 var v btn = document.getElementById('id-btn-timer'); 

83 v btn.innerText = "计时 器 按钮 (0) 秒 " ; 

84 } 

05. «/scripL» 

86 «/html» 


关于 【代码 4-8】 的 说 明 : 

o 第 14 行 代码 通过 <button id="id-btn-timer"> 标 签 定义 一 个 按钮 ， 用 于 演示 计时 器 按钮 的 效果 

e 第 17~20 行 代码 通过 <button> 标 签 定 义 一 组 按钮 ， 分 别 用 于 实现 开始 倒计时 、 暂 停 倒 计时 、 
恢复 倒计时 和 停止 倒计时 这 几 个 基本 功能 。 

e 第 25 行 代码 定义 并 初始 化 了 一 个 空 的 计时 器 (myTimer = null )， 第 26 行 代 码 定义 并 初始 化 
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Di } 

S2 function on pause timer() { 

23 var v btn - document.getElementById('id-btn-timer'); 

54 var v btn pause - document.getElementById('id-btn-pause'); 
229 v btn pause.disabled - true; 

56 var v btn restore - document.getElementById('id-btn-restore'); 
57 v btn restore.disabled - false; 

58 window.clearInterval (myTimer); // TODO: 清除 计时 器 

99 } 

60 function on restore timer() { 

61 var v btn = document.getElementById('id-btn-timer'); 

62 var v btn restore = document.getElementById('id-btn-restore'); 
63 v btn restore.disabled = true; 

64 var v btn pause = document.getElementById('id-btn-pause'); 
65 v btn pause.disabled - false; 

66 myTimer = window.setInterval(function () { 

67 mySec-t*; //TODO: 计时 器 累加 
68 v btn.innerText = "计时 器 按钮 (" + mySec/1000 + ") 秒 "; 

69 ), 1); 

70 ) 

Tt function on stop timer() { 

rp. var v btn stop - document.getElementById('id-btn-stop'); 

73 v btn stop.disabled - true; 

74 var v btn start = document.getElementById('id-btn-start'); 
75 v btn start.disabled - false; 

76 var v btn pause - document.getElementById('id-btn-pause'); 
77 v btn pause.disabled - true; 

78 var v btn restore = document.getElementById('id-btn-restore'); 
+9 v btn restore.disabled = true; 

80 window.clearInterval (myTimer); // TODO: 清除 计时 器 
81 mySec - 0; // TODO: 计时 器 清 零 
82 var v btn = document.getElementById('id-btn-timer'); 

83 v btn.innerText = "计时 器 按钮 (0) 秒 " ; 

84 } 

05. «/scripL» 

86 «/html» 


关于 【代码 4-8】 的 说 明 : 

o 第 14 行 代码 通过 <button id="id-btn-timer"> 标 签 定义 一 个 按钮 ， 用 于 演示 计时 器 按钮 的 效果 

e 第 17~20 行 代码 通过 <button> 标 签 定 义 一 组 按钮 ， 分 别 用 于 实现 开始 倒计时 、 暂 停 倒 计时 、 
恢复 倒计时 和 停止 倒计时 这 几 个 基本 功能 。 

e 第 25 行 代码 定义 并 初始 化 了 一 个 空 的 计时 器 (myTimer = null )， 第 26 行 代 码 定义 并 初始 化 
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【代码 4-9】( 详 见 源 代码 目录 ch04-js-btn-textarea-scroll.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 阅 读 完 协议 才 可 以 单 击 的 注册 按钮 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<p> 
<textarea readonly-true id-"id-textarea-reg" 
onscroll-"on scroll reg(this.id)"» 
阅读 完 协议 才 可 以 单 击 的 注册 按钮 . 
«/textarea» 
«button id-"id-btn-reg" disabled> 用 户 注册 </button> 
</P> 
</body> 
<script type="text/javascript"> 
function on scroll reg(thisid) { 
textareaReg = document.getElementById (thisid); 
if ((textareaReg.scrollTop + textareaReg.clientHeight) >= 
textareaReg.scrollHeight) { 
document.getElementById("id-btn-reg").disabled = false; 


} 
</script> 
</html> 


关于 【代码 4-9】 的 说 明 : 

e 第 14-16 行 代码 通过 <textarea> 标 签 定 义 了 一 个 文本 域 ， 同 时 定义 了 onscroll 滚动 事件 方法 
(on scroll reg(this.id) )。 
第 17 行 代码 通过 <button id="id-btn-reg"> 标 签 定义 了 一 个 注册 按钮 ， 初 始 状态 是 被 禁用 的 。 
第 21-26 行 行 代码 是 on scroll reg() 事 件 方法 的 实现 ， 通 过 判断 文本 域 的 scrollTop 属性 和 
clientHeight 属性 之 和 是 否 大 于 scrollHeight 属性 得 出 用 户 是 否 阅 读 完 注册 协议 ， 同 时 是 否 执 
行 启 用 激活 注册 按钮 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 4.9 所 示 。 
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阅读 完 协 议 才 可 以 单 击 的 注册 按钮 阅读 完 协议 才 可 以 单 击 的 注册 按钮 


图 4.9 JavaScript 注册 按钮 倒计时 效果 
注意 深 动 条 的 初始 位 置 以 及 拖 动 到 底 后 注册 按钮 的 状态 (“用 户 注 册 ” 按 钮 被 成 功 启用 激活 )。 


第 5 章 链接 特效 


本 章 介 绍 如 何 通过 JavaScript 来 实现 各 种 链接 特效 ， 通 过 这 些 特效 来 丰富 HTML 文档 的 设计 
手段 和 页 面 效果 。 


5.1. 链接 概述 


HTML 页 和 面 中 的 链接 用 于 与 其 他 文档 对 象 ( 锚 点 、 页 和 面 和 多 媒体 对 象 等 ) 进行 连接 。HTML 
链接 (也 称 “ 超 链 接 ”) 可 以 由 一 个 字母 、 一 个 单词 或 者 一 句 话 组 成 ， 也 可 以 是 一 张 照片 或 一 段 视 
频 的 多 媒体 元 素 。 总 之 ， 可 以 通过 单 击 这 些 链 接 跳 转 到 其 他 文档 对 象 上 去 。 

一 般 的 ， 在 HTML 文档 中 通过 使 用 <a> 标 签 元 系 来 创建 链接 ， 具 体 有 两 种 定义 方式 : 


e 通过 使 用 href 属性 创建 指向 其 他 页 面 、 多 媒体 对 象 的 链接 。 
e 通过 使 用 name 属性 创建 文档 内 的 书签 ( 锚 点 )。 


具体 的 语法 格式 如 下 : 
【代码 5-1] 
/** 通过 href 属性 定义 超 链 接 */ 


«a href="http://www.domain.com/" target=""> 打 开 链 接 </a> 
/** 通过 name 属性 定义 书签 (WA) */ 
«a name="1abe1l1"> 锚 点 书签 〈 锚 点 ) </a> 


为 外 ， 在 使 用 href 属性 定义 url 地 址 时 ， 既 可 以 使 用 绝对 地 址 〈http:/) ， 也 可 以 使 用 相对 地 
HE C.) o 在 使 用 书签 ( 销 点 ) 时 ， 既 可 以 使 用 name 属性 定义 名 称 ， 也 可 以 使 用 id 属性 定义 唯 
一 标识 符 。 


5.2 市 下 划 线 的 链接 


在 HTML 页 面 中 ， 超 链接 再 被 访问 过 后 默认 会 市 上 下 划 线 ， 用 来 标识 该 超 链接 地 址 已 被 打开 
过 。 那 么 ， 如 何 为 未 被 访问 过 的 超 链接 加 上 下 划 线 呢 ? 下 面 介 绍 一 个 通过 JavaScript 定义 市 下 划 线 
的 超 链接 的 代码 实例 。 
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【代码 5-2】( 详 见 源 代码 目录 ch05-js-alink-underline.html 文件 ) 


01 «!doctype html» 

02 «html lang-"en"» 

03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 

06 </head> 

07 <style> 

08 a { 

09 text-decoration: none; 

10 } 

11 «/style» 

12 «body» 

13 «!-- 添加 文档 主体 内 容 --> 

14 <header> 

15 <nav> 带 下 划 线 的 链接 </nav> 

16 </header> 

17 <!-- 添加 文档 主体 内 容 --> 

18 «div class-"css-p"» 

19 «a href="#"> 带 下 划 线 的 链接 (href) «/a»«br/»«br/» 
20 «a name="#"> 带 下 划 线 的 链接 (name) </a><br/><br/> 
21 <!-- 定义 按钮 --> 

22 <input type="button" value=" 为 全 部 链接 添加 下 划 线 " 


onclick="addLinkUnderline();"/> 


ZI Defui 

24 «/body» 

25 «script type-"text/javascript"» 

26 function addLinkUnderline() { 

27 // TODO: 获取 到 所 有 的 链接 <a> 

28 var aLinks = document.getElementsByTagName ("a"); 

29 for (var i = 0; i < aLinks.length; i++) { / REI 
30 var link = aLinks[il;  // 当 前 的 链接 DOM 

31 link.style.textDecoration = 'underline'; // 设 置 下 划 线 样式 
32 } 

33 } 

34 «/script» 

Bo </htmi> 


e 第 19~20 行 代码 通过 <a> 标 签 元 素 定义 一 组 链接 ， 分 别 使 用 href 属性 和 name 属性 来 定义 。 
这 里 需要 读者 注意 的 是 ， 采 用 第 08 ~ 10 行 代码 中 将 <a> 标 签 定义 的 无 下 划 线 的 样式 ， 这 样 页 
面 中 所 显示 的 全 部 <a> 标 签 均 是 无 下 划 线 的 。 
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e 第 22 行 代码 通过 <inpu 人 标签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 _ onclick 单 击 事件 方法 
( addLinkUnderline() ). 
e 第 26~33 行 代码 是 addLinkUnderline() 事 件 方 法 的 具体 实现 . 其 中 , 第 31 行 代码 通过 为 Style 
对 象 的 textDecoration 属性 定义 属性 值 (underline' )， 将 全 部 链接 <a> 定 义 为 下 划 线 样式 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 5.1 所 示 。 
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带 下 划 绪 的 链接 带 下 划 | 线 的 链接 


带 下 划 线 的 链接 (href) 带 下 划 线 的 链接 (href) 


带 下 划 线 的 链接 (name) 


为 全 部 链接 添加 下 划 线 


图 5.1 JavaScript 定义 带 下 划 线 的 链接 


如 图 5.1 中 篆 头 所 示 ， 单 击 “ 为 全 部 链接 添加 下 划 线 ”按钮 后 ， 页 面 中 的 全 部 超 链接 均 添 加 上 
了 下 划 线 样式 。 


5.3 ”改变 链接 的 click 事件 


对 于 链接 <a> 标 签 元 素来 讲 ， 单 击 click 操作 后 的 跳 转 目标 地 址 正常 都 是 由 href 属性 定义 的 url 
地 址 或 锚 点 。 那 么 ， 可 不 可 以 改变 <a> 标 签 元 素 中 的 click 事件 呢 ? 下 面 介 绍 一 个 通过 JavaScript 改 
变 链 接 click 事件 的 代码 实例 。 


【代码 5-3】( 详 见 源 代码 目录 ch05-js-alink-modify-click.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 


</head> 
«body» 
«1-- 添加 文档 主体 内 容 --> 
«header» 
<nav> 改 变 链接 的 click 事件 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 
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13 «div class-"css-p"» 

14 <p> 

15 «a href="#anchor" id="id-m-1ink"> 一 个 链接 </a> 
16 «/p» 

17 «p» 


18 «a name-"anchor" id="id-m-anchor"> 一 个 锚 点 </a> 
19 </p> 

20 </div> 

21 </body> 


22 <script type="text/javascript"> 

23 window.onload = function () { 

24 var mLink = document.getElementById ("id-m-link"); 
25 mLink.onclick = function () í 

26 alert (' 超 链接 被 点 击 了 ! ') ; // 事 件 的 内 容 逻 辑 

27 return false;  // 返 回 

28 }; 

29 l? 

30 </script> 

31 «/html» 


关于 【代码 5-3】 的 说 明 : 
e 第 15 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 链接 , 将 href 属性 值 定义 为 一 个 锚 点 值 (#anchor ). 
id 属性 值 定义 为 ("id-m-link" ), 
e 第 18 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 锚 点 , 将 name 属性 值 定义 为 (#anchor ), 这 样 就 可 
以 保证 在 单 击 第 15 行 代 码 定 义 的 链接 后 ， 跳 转 到 第 18 行 代码 定义 的 锚 点 位 置 。 
FAEH Firefox 浏览 器 运行 测试 该 HTML 网 页 〈 先 注销 第 23 一 29 行 代码 ) ， 具 体 效果 如 图 
5.2 所 示 。 
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52 JavaScript 改变 链接 的 click 事件 (一 ) 


如 图 5.2 中 篆 头 所 示 ， 单 击 “ 一 个 链接 ”的 超 链 接 后 ， 页 面 会 目 动 跳 转 到 “一 个 锚 点 ”的 锚 氮 
位 置 。 
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下 面 继续 看 【代码 5-3】 的 说 明 : 


e 第 23~29 行 代码 定义 了 Window 对 和 象 的 onload 事件 处 理 方法 。 其 中 ， 第 25 ~ 28 行 代 码 为 第 
15 行 代 码 定义 的 超 链接 (id-"id-m-link" ) 添加 了 onclick 单 击 事件 处 理 方法 ， 第 26 行 代码 定 
义 了 一 个 弹出 式 alert 警告 框 ， 第 27 行 代码 通过 retur 语句 返回 。 这 样 ， 当 用 户 单 击 第 15 行 
代码 定义 的 超 链接 时 ， 就 会 执行 第 25 ~ 28 行 代码 定义 的 onclick 单 击 事件 处 理 方法 ， 而 href 
属性 定义 的 锚 点 地 址 会 被 覆盖 抒 。 


下 面 继续 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 5.3 所 示 。 
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改变 链接 的 click 事 件 


~ 
5.3 JavaScript 改变 链接 的 click 事件 (二) 
如 图 5.3 中 第 关 所 示 ， 单 击 “ 一 个 链接 ”链接 后 ， 页 和 面 中 会 弹出 一 个 警告 框 。 男 外 ， 读 者 可 以 
测试 一 下 ， 妆 单 击 警 告 框 中 的 “确定 ”按钮 关闭 该 警告 框 后 ， 页 面 是 不 会 如 图 5.2 中 的 效果 那样 自 
动 跳 转 到 “一 个 锚 点 ”位 置 上 的 。 


54 关闭 窗口 的 X ”链接 


在 HTML DOM 的 Window 对 象 中 ， 定义 有 一 个 close0 方 法 可 以 关闭 窗口 。 这 样 , 设计 人 员 就 
可 以 在 页 面 中 目 定义 一 个 “X7” 链 接 来 关闭 页 面 窗口 了 。 需 要 读者 注意 的 是 ， 该 方法 对 于 各 个 浏览 
器 的 兼容 性 (主要 是 由 于 有 的 浏览 器 目 映 进行 了 限制 ) 不 太 友 好 ， 所 以 设计 人 员 在 使 用 时 要 慎重 。 
下 面 介绍 一 个 通过 JavaScript 实现 关闭 窗口 的 “X” 和 链接 的 代码 实例 。 


【代码 5-4】( 详 见 源 代码 目录 ch05-js-alink-x-close.html 文件 ) 


<!doctype html» 
«html lang-"en"» 


«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 


<!-- 添加 文档 主体 内 容 --> 
«header» 
<nav> 关 闭 窗口 的 “X” 链 接 </nav> 
«/header» 
<!-- 添加 文档 主体 内 容 --> 
点 击 &nbsp;<a href-"4" id-"id-x-link"»X«/a»&nbsp; XAA O 


</body> 
<script type="text/javascript"> 
var xLink = document.getElementById("id-x-link"); 
xLink.onclick = function() i 
window.close(); // 关 闭 窗 口 
return false; / NRE 
}; 
<í script> 
</html> 


关于 【代码 5-4】 的 说 明 : 
o 第 12 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 链接 ， 风 格 样式 接近 窗口 标题 栏 中 的 关闭 按钮 。 
o 第 17 行 代码 通过 调用 Window 对 象 的 close() 方 法 关闭 当前 页 面 窗口 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 5.4 所 示 。 
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54 JavaScript 实现 关闭 窗口 的 “X” 链 接 
如 图 5.4 中 箭头 所 示 ， 当 点 击 页 面 中 “X” 超 链接 后 ， 会 关闭 当前 页 面 窗口 。 


5.5 用 链接 模拟 一 个 按钮 


对 于 链接 和 按钮 而 言 ， 从 本 质 上 虽然 是 两 种 不 同 的 HTML 标签 元 素 ， 但 最 终 所 实现 的 功能 
茶 种 意义 上 讲 是 十 分 类 似 的 。 那 么 可 不 可 以 将 链接 模拟 成 为 一 个 按钮 呢 ? 下 面 介绍 一 个 通过 
JavaScript 将 链接 模拟 成 为 按钮 的 代码 实例 。 
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【代码 5-5】( 详 见 源 代码 目录 ch05-js-alink-btn.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
Td 
12 
13 
14 
13 
16 
T7 
18 
19 
20 
21 
22 
23 
24 
25 
26 
21 
28 
29 
30 
31 
32 
Bo 
34 


<!doctype html» 
«html lang-"en"» 


<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
<nav> 用 链接 模拟 一 个 按钮 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«p» 
«a href="#" id="id-link-btn"> 按 钮 式 链接 </a> 
</p> 
</body> 
«script type="text/javascript"> 
window.onload = function () { 
var linkBtn = document .getElementById("id-link-btn"); 
// TODO: 将 链接 定义 成 按钮 样式 
linkBtn.style.fontSize = '16px'; // 字 体 
linkBtn.style.textAlign = 'center'; / /字符 对 齐 
linkBtn.style.color = 'white'; // 颜 色 
linkBtn.style.padding = '4px 10px'; // 内 距离 
linkBtn.style.margin = '3px'; // 外 边框 
linkBtn.style.background = 'gray'; // 背 景色 
linkBtn.style.textDecoration = 'none'; // 文 本 样式 
// TODO: 边框 颜色 ， 造 成 深浅 效果 来 模仿 按钮 
linkBtn.style.borderColor = '4EEEEEE #666 $666 £$EEEEEE'; 
linkBtn.style.borderStyle = 'solid'; / /边框 样式 为 实 线 
linkBtn.style.borderWidth = 'lpx'; // 边 框 的 粗细 
}; 
«/script» 
«/html» 


关于 【代码 5-5】 的 说 明 : 


e 第 14 行 代 码 通过 <a> 标 签 元 素 定 义 了 一 个 链接 ， 目 标 是 把 该 链接 模拟 成 为 一 个 按钮 的 样式 。 
e 第 21~31 行 代码 通过 Style 对 象 将 链接 的 样式 模拟 成 为 按钮 的 样式 ， 主 要 是 针对 背 录 颜色 


( background ) 属性 和 一 组 边框 样式 (borderColor、borderStyle 和 borderWidth ) 属性 的 定义 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 5.5 所 示 。 
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文件 昌 ED EV FLO SES ISD 


JavaScript 全 程 实例 
> C | © local S 


用 链接 模拟 一 个 按钮 


按钮 式 链 接 


图 5.5 JavaScript 实现 用 链接 模拟 一 个 按钮 
如 图 5.5 PEKAR, HTML 文档 中 原本 定义 的 超 链接 完全 被 模拟 成 为 一 个 按钮 的 样式 了 。 


5.6 用 链接 答 代 表单 提交 按钮 


5.5 节 中 实现 了 用 链接 模拟 一 个 按钮 样式 的 操作 ,本 节 将 进一步 用 链接 谷 代 表单 中 的 提交 按钮 ， 
真正 实现 提交 表单 的 功能 。 下 面 看 一 个 通过 JavaScript 实现 用 链接 替代 表单 提交 按钮 的 代码 实例 。 


【代码 5-6】( 详 见 源 代 码 目录 ch05-js-alink-submit.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 用 链接 替代 表单 提交 按钮 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«form name-"formLink" method-"get" action-"ch05-js-alink-submit.php"» 
«table» 
SUI» 
«th»H P! 4 :&nbsp; &nbsp; «/th» 


<td><input type="text" name-"username"/»«/td» 
SEES 
SLES 

«th»«/th» 

«td» 
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<a href="#" id-"id-link-submit" onclick-"on link submit () "> 


提交 表单 </a> 


«/td» 
«/tr» 
«/table» 
«/form» 
«/body» 
«script type-"text/javascript"» 


/** 
* 通过 链接 提交 表单 
function on link submit() 1 
document.formLink.submit(); //TODO: 提交 表单 
i 
«/script» 
</html> 


关于 【代码 5-6】 的 说 明 : 

e 第 13~26 行 代码 通过 <form> 标 签 元 素 定义 了 一 个 表单 。 其 中 ， 第 17 行 代码 定义 了 一 个 文本 
框 ， 用 于 输入 用 户 名 ; 第 22 行 代 码 通过 <a> 标 签 元 素 定义 了 一 个 链接 ， 并 定义 了 单 击 onclick 
事件 方法 (on link submit) )， 目 的 是 把 该 链接 模拟 成 为 一 个 提交 (Submit) 按钮 。 

o 第 32~34 行 代码 是 对 onclick 事件 方法 (on link submit() ) 的 具体 实现 ， 第 33 行 代 码 直 接 通 
过 调用 Form 对 象 的 submit() 方 法 实现 表单 的 提交 ， 这 样 就 将 链接 <a> 标 签 蔡 代 成 为 提交 

( Submit ) 按钮 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 5.6 所 示 。 


JavaScript 全 程 实例 > || localhost:9090/js-total-samples/ch X | 十 
QC © locali | e € ^ Œ |© local 


Form username : king. 


用 链接 车 代 表单 提交 按钮 


用 户 名 : 


5.6 JavaScript 实现 用 链接 蔡 代 表单 提交 按钮 


如 图 5.6 中 箭头 所 示 ， 第 22 行 代码 定义 的 链接 <a> 标 签 被 模拟 成 为 一 个 提交 按钮 样式 。 同 时 ， 从 
单 击 链接 “提交 表单 ”后 的 提交 结果 来 看 ， 链 接 <a> 成 功 蔡 代 了 表单 中 提交 (Submit)〉 按 钮 的 功能 。 
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5.7 ”动态 修改 一 个 链接 的 地 址 


超 链 接 <a> 标 签 元 素 中 定义 有 一 个 属性 href， 用 于 指定 该 链接 的 目标 URL. 地 址 或 锚 点 。 可 以 
通过 动态 修改 该 属性 值 达到 动态 修改 链接 目标 地 址 的 功能 。 下 面 看 一 个 通过 JavaScript 实现 动态 修 
改 一 个 链接 地 址 的 代码 实例 。 


【代码 5-7】( 详 见 源 代码 目录 ch05-js-alink-modify-href.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 <nav> 动 态 修改 一 个 链接 的 地 址 </nav> 
11 </header> 

12 «!-- 添加 文档 主体 内 容 --> 


13 «p» 

14 «a href="#first-anchor" id="id-m-1ink"> 一 个 链接 </a><br/> 

15 «input type-"button" value=" 修 改 链接 地 址 " id-"id-btn" 
onclick-"on modify url();"/» 

16 </p> 

17 «p» 

18 «a name="first-anchor"> 第 一 个 锚 点 </a> 

19 «/p» 

20 «p» 

21 «a name="second-anchor"> 第 二 个 锚 点 </a> 

22 «/p» 

23 «/body» 

24 <script type-"text/javascript"» 

P s S 

26 * 动态 修改 链接 的 地 址 

21 */ 

28 function on modify url() { 

29 var mLink = document.getElementById ("id-m-link"); 

30 mLink.href = "£second-anchor"; // TODO: 修改 链接 的 地 址 

31 } 


32 €fsotipL» 
33 «/html» 
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关于 【代码 5-7】 的 说 明 : 

e 第 18 行 和 第 21 行 代码 通过 <a> 标 签 元 素 定义 了 两 个 锚 点 ("first-anchor" 和 "second-anchor" )。 
第 14 行 代码 通过 <a id="id-m-link"> 标 签 元 素 定义 了 一 个 链接 , 初始 的 href 属性 值 为 第 一 个 锚 
点 ("#first-anchor" ), 

e 第 15 行 代码 通过 <input> 标 签 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 

(on modify url) )， 目 标 是 通过 动态 修改 <a id=-"id-m-link"> 标 签 元 素 的 href 属性 值 来 改变 链 

授 的 目标 地 址 。 

e 第 28~31 行 代码 是 对 onclick 事件 方法 (on modify url) ) 的 具体 实现 。 其 中 ， 第 30 行 代码 
直接 通过 修改 href 属性 值 ， 将 初始 的 第 一 锚 点 ( "Hfrst-anchor" ) 改变 成 第 二 个 锚 点 


( "#second-anchor" ), 


5.8 让 所 有 链接 都 在 新 窗口 打开 


超 链接 <a> 标 签 元 素 中 定义 有 一 个 target 属性 ， 用 于 规定 以 何 种 方式 打开 链接 文档 。 该 属性 的 
默认 值 为 “self”， 表 示 在 当前 窗口 打开 文档 ， 如 果 将 属性 值 定义 为 “blank”， 则 表示 在 新 窗口 
中 打开 文档 。 

下 面 看 一 个 通过 JavaScript 实现 让 所 有 链接 都 在 新 窗口 打开 的 代码 实例 。 


【代码 5-8】( 详 见 源 代码 目录 ch05-js-alink-target-blank.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
«1-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 让 所 有 链接 都 在 新 窗口 打开 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div class="css-p"> 
<!-- 定义 链接 --> 
«a href="#"> 链 接 一 </a><br/> 
<a href="#"> 链 接 二 </a><br/> 
«a href="#"> 链 接 二 </a><br/> 
<!-- 定义 按钮 --> 
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«input type="button" value=" 修 改 打开 方式 " id-"myBtn" 
onclick="modifyLinkTarget ();"/> 
«/div» 
</body> 
<script type="text/javascript"> 
/** 
* 设 定 所 有 链接 都 在 新 窗口 打开 
ar 
function modifyLinkTarget() { 


// 获 取 到 所 有 链接 的 DOM 
var linkDOMS = document.getElementsByTagName ("a"); 
for (var i = 0; i < linkDOMS.length; i++) ( 
var link = linkDOMS[i]; // 当 前 的 链接 DOM 
link.target = " blank"; // 在 新 窗口 中 打开 


} 
34 </script> 
35 «/html» 


关于 【代码 5-8】 的 说 明 : 

e 第 15~17 行 代码 通过 <a> 标 签 元 素 定义 了 一 组 超 链接 ， 由 于 未 指定 target 属性 值 ， 因 此 target 
属性 值 默认 为 “ self". 

e 第 29~32 行 代码 通过 for 循环 语句 ， 将 页 面 中 的 全 部 链接 target 属性 值 修改 为 “blank”， 这 
样 再 点 击 页 面 中 的 任何 一 个 超 链 接 都 将 会 在 新 窗口 中 打开 了 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 5.7 所 示 。 

XXE) MED EB) PRO $20 I0 AH z4 S80 SEV 历史 (9) #20 IAO SAE 

JavaScript 全 程 实 JavaScript 2E X | 十 GJ 


JavaScript 全 程 实例 
C' | © locali d 


让 所 有 链接 都 在 新 窗口 打开 


链接 一 ”链接 一 ”链接 二 


5.7 JavaScript 实现 让 所 有 链接 都 在 新 窗口 打开 


如 图 5.7 中 篆 头 所 示 ， 在 通过 单 击 “修改 打开 方式 ”按钮 修改 链接 <a> 标 签 元 素 的 target 属性 
值 后 ， 青 单 击 页 面 中 的 超 链接 将 会 在 新 窗口 中 打开 页 面 。 
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5.9 让 页 面 所 有 的 超 链 接 都 失效 


超 链接 <a> 标 签 元 素 中 定义 有 一 个 target 属性 ， 用 于 规定 以 何 种 方式 打开 链接 文档 。 该 属性 的 
默认 值 为 “self”， 表 示 在 当前 窗口 打开 文档 ; 如果 将 属性 值 定 义 为 “blank”， 则 表示 在 新 窗口 
中 打开 文档 。 

下 面 看 一 个 通过 JavaScript 实现 让 所 有 链接 都 失效 的 代码 实例 。 


【代码 5-9】( 详 见 源 代码 目录 ch05-js-alink-href-invalid.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
<head> 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
<nav> 让 页 面 所 有 的 超 链接 都 失效 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div class="css-p"> 
<!-- 定义 链接 --> 
«a href="#"> 链 接 一 </a>&nbsp; &nbsp; 
«a href="#"> 链 接 二 </a>&nbsp; &nbsp; 
«a href="#"> 链 接 三 </a>&gnbsp; &nbsp; «br/»«br/»«br/» 
<!-- 定义 按钮 --> 
«input type="button" value=" 让 超 链接 失效 " onclick="invaildLinks ();"/> 
</div> 
</body> 
«script type-"text/javascript"» 
/** 
* 让 页 面 所 有 的 超级 链接 都 失效 
is! 
function invaildLinks() { 
// 获 取 到 所 有 的 链接 的 DOM 
var linkDOMS = document.getElementsByTagName ("a"); 
for (var i2» 0; i « linkDOMS.length; i-*-*) | 
var link = linkDOMS[i]; // 当 前 的 链接 DOM 
link.onclick = null; // 把 单 击 事件 置 空 
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32 link.href = 'javascript:void(0)'; // 地 址 改 成 什么 都 不 做 
33 } 


34 } 
SEEcraBtE 
36 «/html» 


关于 【代码 5-9】 的 说 明 : 


e@ 【代码 5-9】 是 在 【代码 5-8】 的 基础 上 修改 而 成 的 ， 关 键 点 是 第 31 行 和 第 32 行 代码 。 

e 第 31 行 代码 通过 将 超 链接 对 象 (link) 的 onclick 事件 置 空 ， 实 现 了 屏蔽 链接 <a> 标 签 元 素 的 
单 击 操作 。 

e 第 32 代码 通过 将 超 链接 对 象 (link) 的 href 属性 值 修改 为 (javascript:void(0) )， 表 示 将 执行 
一 段 js 脚本 代码 ; 而 具体 的 脚本 代码 (void(0) ) 又 是 一 个 空 方法 ， 也 就 相当 于 让 页 面 中 的 超 
链接 都 失效 。 


5.10 ”为 链接 地 址 新 加 一 个 参数 


URL (统一 资源 定位 符 ) 是 互联 网 上 标准 资源 的 地 址 ， 一 般 由 页 面 名 称 和 寿 干 参数 组 合 而 成 。 
例如 “http://www.people.com/index.html?page=1&...” 就 是 一 个 标准 的 URL 地 址 写法 。 

超 链 接 <a> 标 签 元 素 中 定义 的 href 属性 值 就 是 一 个 具体 的 URL 地 址 。 那 么 ， 可 不 可 以 动态 地 
为 超 链接 <a> 标 签 元 素 中 定义 的 URL 地 址 添加 参数 呢 ? 下 面 看 一 个 通过 JavaScript 实现 为 URL 链 
接地 址 新 加 一 个 参数 的 代码 实例 。 


【代码 5-10] ( 详 见 源 代码 目录 ch05-js-alink-href-param.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 为 链接 地 址 新 加 一 个 参数 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div class-"css-p"» 
«a href="index.php"> 链 接 1«/a»&nbsp; &nbsp; 
«a href="index.php?page=1"> 链 接 2«/a»&nbsp; &nbsp;«br»«br» 
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<input type="button" value=" 为 链接 地 址 新 加 一 个 参数 " 
onclick="addUrlParam();"/> 
</div> 
</body> 
<script type="text/javascript"> 
/** 
* 为 链接 地 址 新 加 一 个 参数 
Tr 
function addUrlParam() { 
// 得 到 链接 的 DOM 
var links = document.getElementsByTagName('a'); 
/ Th 3I BER 


for [var 1 = D; 1 « links.lengrthz; itt) | 


var aHref - links[i]['href']; // 得 到 当前 的 链接 地 址 
/ /如果 链 接地 址 包含 了 问号 ， 说 明 已 经 带 有 参数 了 
if (aHref.indexOf('?') > 0) f 
// 使 用 & 符 号 串联 更 多 的 参数 
links[i]['href'] = href + '&tab-2'; 
) else ( 
// 使 用 ? 来 新 加 第 一 个 参数 
links[i]['href'] = href + '?page-1'; 
} 
} 
} 
c/script» 
«/html» 


关于 【代码 5-10] BUE BH: 


o 第 28 行 代码 通过 href 属性 获取 了 当前 链接 <a> 标 签 元 素 定 义 的 URL 地 址 ( aHref ), 
e 第 30 行 代码 通过 让 条 件 语句 判断 aHref 地 址 是 否 包含 字符 “2”。 如 果 和 包含 就 表示 该 地 址 已 经 


包含 参数 了 ， 执 行 第 32 行 代码 ; 如 果 不 包 含 就 表示 该 地 址 没有 带 参 数 ， 执 行 第 35 行 代码 。 


e 第 32 行 代 码 通过 字符 '&' 串联 新 加 的 参数 。 
e 第 35 行 代码 通过 字符 '? 新 加 第 一 个 参数 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 5.8 和 图 5.9 所 示 。 
如 图 5.8 中 第 关 所 示 ， 单 击 “ 为 链接 地 址 新 加 一 个 参数 ”按钮 后 ,浏览 器 状态 栏 中 显示 的 URL 


地 址 新 加 了 第 1 个 参数 (page=1) ， 注 意 问号 〈?) 的 使 用 方法 。 


如 图 5.9 中 第 头 所 示 ， 单 击 “ 为 链接 地 址 新 加 一 个 参数 ”按钮 后 ,浏览 器 状态 栏 中 显示 的 URL 


地 址 新 加 了 第 2 个 参数 (tab=2) ， 注 意 & 符 号 的 使 用 方法 。 
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文件 日“ 编辑 日 EB) 历史 (9) 书签 BB) IAO SENE 文件 日 “编辑 日” 查 看， 历史 9 书签 IAO EC 


JavaScript 全 程 实例 D | EM JavaScript 全 程 实例 X | 十 


> Œ | © localt l e.. C)23 CQ |© loclh BR te 
为 链接 地 址 新 加 一 个 参数 为 链接 地 址 新 加 一 个 参数 


TD TD 


localhost:63342/js-total-samples/ch05/index.php 47 localhost:63342/js-total-samples/ch05/index.php?page- 


图 5.8 JavaScript 实现 为 链接 地 址 新 加 一 个 参数 〈 第 一 个 参数 的 情况 ) 


ZH S50 EEV PLO #26) IA SMH HO S850 ZEV PLO #26) IAO WEE 
E] Javascript 全 程 实例 x m B. JavaScript 全 程 实例 : 


人 (D local! es puis -— G © local! uem TT 
为 链接 地 址 新 加 一 个 参数 为 链接 地 址 新 加 一 个 参数 


MICI, 链接 1 


localhost:63342/js-total-samples/ch05/index.php?page- 1 localhost:63342/js-total-sa...ch05/index.php?page- 18 


图 5.9 JavaScript 实现 为 链接 地 址 新 加 一 个 参数 (已 带 有 参数 的 情况 ) 


5.11 返回 页 面 项 部 的 链接 


相信 读者 在 浏览 很 多 大 型 门户 网 站 的 主页 时 都 会 发 现 页 和 面 栏目 板块 非常 多 ， 而 且 页 和 面 的 长 度 
很 长 。 一般 情况 下 ， 这 类 页 和 面 会 在 每 个 栏目 板块 内 都 定义 一 个 链接 (例如: 返回 项 部 ) ， 用 于 执行 
返回 到 页 和 面 项 部 的 操作 ， 是 一 个 非常 实用 的 功能 。 

如 果 要 实现 返回 页 面 项 部 链接 的 功能 ， 就 要 使 用 到 scrollTop 这 个 属性 。 根 据 HTML DOM 规 
范 的 定义 ，scrollTop 属性 可 以 获取 或 设置 一 个 元 系 的 内 容 垂 直 滚 动 的 像素 数 。 如 果 我 们 答 试 将 
<html> 对 象 的 scrollTop 属性 设置 为 0， 是 不 是 就 可 以 实现 返回 页 面 项 部 的 操作 了 呢 ? 下 面 看 一 个 
通过 JavaScript 实现 定义 回 到 页 面 项 部 链接 的 代码 实例 。 


【代码 5-11] ( 详 见 源 代码 目录 ch05-js-alink-scrollTop.html 文件 ) 


<!doctype html» 
«html lang-"en"» 


«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 


94 | JavaScript+Vue+React 全 程 实例 


</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 

«nav»JavaScript 链接 特效 - 返回 页 面 顶部 的 链接 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«a href-"javascript:toPageTop () ;"> 回 到 顶部 </a> 
«a href-"javascript:toPageTop () ;"> 回 到 顶部 </a> 
«a href-"javascript:toPageTop () ;"> 回 到 顶部 </a> 
</body> 
«script type-"text/javascript"» 

/** 


* 回 到 页 面 顶部 链接 的 方法 

a i 

function toPageTop() { 
// TODO: 通过 修改 document 的 scrollTop 属性 值 来 返回 到 页 面 顶 部 
if(document.compatMode === "CSSlCompat") { 


document.documentElement.scrollTop = 0; 

) else if(document.compatMode --- "BackCompat") { 
document.body.scrollTop = 0; 

} else { 
document.documentElement.scrollTop = 0; 


) 
</script> 
</html> 


关于 【代码 5-11】 的 说 明 : 

e $ 13-15 行 代码 通过 <a> 标 签 元 素 定义 了 一 组 超 链接 (“ 回 到 顶部 ” )， 其 中 href 属性 值 均 定 
义 为 一 行 js 代码 (javascript:toPageTop() )， 当 用 户 点 击 该 超 链 接 时 就 会 调用 toPageTop() 方 法 。 

e 第 21~30 行 代码 是 对 toPageTop() 方 法 的 实现 , 通过 设 定 document 对 象 的 scrollTop 属性 值 为 
0， 实 现 返 回 页 面 顶部 的 操作 。 


需要 注意 的 是 ， 第 23 一 29 行 代码 中 通过 if 条 件 选 择 语句 判断 了 compatMode 属性 的 取 值 ， 然 
后 根据 结果 执行 了 不 同 的 js 脚本 代码 。 原 因 是 对 于 HTML 文档 而 言 ， 是 否定 义 DID 类 型 对 于 
scrollTop 属性 的 使 用 方法 是 不 同 的 ,而 compatMode 属性 就 是 用 于 判断 HTML 文档 是 否定 义 了 DTD 
类 型 的 。 
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5.12 ”需要 确认 的 超 链接 


如 果 想 在 打开 一 个 超 链接 之 前 需要 用 户 确认 一 下 是 否 打 开 该 链接 ， 那 么 这 个 功能 如 何 实 现 
呢 ? 下 面 看 一 个 通过 JavaScript 实现 需要 确认 的 超 链接 的 代码 实例 。 


【代码 5-12】( 详 见 源 代码 目录 ch05-js-alink-confirm.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
<head> 

<!-- 添加 文档 头 部 内 容 --> 

«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 

<nav>JavaScript 链接 特效 - 需要 确认 的 超 链接 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«a href-"http://www.gov.cn/" onclick="return (confirmopen (this .href) ) "> 

打开 超 链接 </a> 

</body> 
<script type="text/javascript"> 

/** 

* 需要 确认 的 链接 

* @param link 

* (returns {boolean} 

EF 

function confirmOpen(link) ( 

if (confirm(' 请 您 确认 打开 ' + link + "网 址 吗 ?')) { 
return true; // TODO: 返回 true 
} else { 
return false;  // TODO: 返回 false 


} 
</script> 
</html> 
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关于 【代码 5-12】 的 说 明 : 

e 第 13 行 代码 通过 <a> 标 签 元 素 定义 了 一 个 超 链接 , 其 中 定义 了 href 属性 值 ("http://www.gov.cn/" ); 
同时 , 还 定义 了 onclick 事件 处 理 方法 ( return(confirmOpen(this.href)) )， 这 行 js 代码 的 含义 是 
直接 通过 return 语句 返回 confirmOpen() 方 法 的 返回 值 。 

这 里 需要 注意 的 是 , 对 于 超 链接 <a> 标 签 元 素 的 单 击 操作 而 言 , onclick 事件 方法 执行 先 于 href 
属性 定义 的 URL 地 址 ; 如 果 onclick 事件 方法 返回 false， 就 不 会 跳 转 到 href 属性 值 指定 的 
URL 地 址 上 去 了 。 

e 第 21~27 行 代码 是 对 confirmOpen() 方 法 的 实现 。 其 中 ， 第 22 行 代码 通过 调动 confirm() 方 法 
让 用 户 选择 是 否 跳 转 到 指定 的 网 址 上 ， 只 有 用 户 确 认 后 ( 单 击 confirm 弹出 窗口 中 的 “确定 ” 
按钮 ) 才 会 继续 进行 跳 转 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 页 面 的 初始 效果 如 图 5.10 所 示 。 
如 图 5.10 中 第 头 所 示 ， 单 击 页 面 中 的 “打开 超 链 接 ” 链 接 ， 页 面 效果 如 图 5.11 所 示 。 
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JavaScript 链接 特效 - 需要 确认 的 超 链 接 


5.10 JavaScript 实现 需要 确认 的 超 链接 图 $.11 JavaScript 实现 需要 确认 的 超 链接 
(初始 页 面 ) (确认 弹出 框 ) 
如 图 5.11 中 第 尖 所 示 ， 我 们 可 以 分 别 单 击 确 认 框 中 的 “确定 ”按钮 和 和 “取消” 按钮， 页面 效 
果 如 图 5.12 所 示 。 
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图 5.12 JavaScript 实现 需要 确认 的 超 链 接 


第 6 章 图 片 特效 


本 章 介绍 如 何 通过 JavaScript 来 实现 各 种 图 片 特效 ， 通 过 这 些 特效 来 丰富 HTML 文档 的 设计 
手段 和 页 面 效果 。 


6.1 A WE XR 
图 片 是 HTML 页 面 中 必 不 可 少 的 元 素 ， 可 以 用 来 丰富 网 页 的 设计 手段 和 展示 特效 。 在 HTML 


文档 中 ， 一 般 通 过 使 用 <img> 标 签 元 素来 定义 图 片 ， 具 体 的 语法 格式 如 下 : 
【代码 6-1] 


/** 网 页 图 片 定义 */ 


«img src-" ^" alt-"  " /» 


其 中 ，src 属性 是 必需 的 ， 用 于 指定 图 像 文件 的 URL 地 址 路 径 ; 而 alt 属性 是 一 个 可 选 属性 ， 
用 于 规定 在 图 像 无 法 显示 时 的 蔡 代 文本 。 

通过 JavaScript 脚本 语言 可 以 为 网 页 图 片 实现 多 种 特效 ， 比 如 图 片 比例 红 放 、 放 大 镜 效 果 、 日 
适应 大 小 、 图 片 边框 、 动 态 加 载 、 延 迟 加 载 等 。 后 面 将 为 读者 介绍 多 种 HTML 网 页 图 片 特效 的 代 
码 实例 。 


62 图 片 比例 缩放 


在 HTML DOM 规范 中 ，Style 对 象 定 义 有 一 个 transform (WebkitTransform) 属性 ， 该 属性 允 
许 癌 元 素 应 用 旋转 、 纵 放 、 移 动 或 倾斜 等 2D 变换 操作 。 有 具体 变换 操作 需要 配合 使 用 scale(?) 方 法 进 
行 ， 该 方法 通过 定义 缩放 因子 (r) 为 当前 画布 添加 一 个 缩放 变换 。 下 面 介 绍 一 个 通过 JavaScript 
实现 图 片 比例 缩放 特效 的 代码 实例 。 


【代码 6-2】( 详 见 源 代码 目录 ch06-js-img-scale.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 


«script type="text/javascript" src="js/ch06-js-browser.js"></script> 
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06 «title»JavaScript 全 程 实例 </tit1le> 
07 «/head» 

08 «body» 

09 «!-- 添加 文档 主体 内 容 --> 

10 <header> 

11 <nav> 图 片 比例 缩放 </nav> 

12 </header> 

13 «!-- 添加 文档 主体 内 容 --> 


14 «p» 

l5 <img src="images/js.jpg" id="id-img-scale"/><br> 

16 <input type="button" value=" 缩 小 " onclick="toScale(-1)"/> 
17 <input type="button" value=" 放 大 " onclick-"toScale(1)"/» 
18 «/p» 

19 </body> 


20 «script type-"text/javascript"» 


21 var x 2-1; 7/ 当 前 的 x 

22 var y = 1; // 当 前 的 y 

23 function toScale(r) (  // 改 变 尺寸 的 函数 

24 // 获 取 DOM 

2 var img = document.getElementById('id-img-scale'); 
26 if (r > 0) { //WH& 

27 x += 0.1;  //x 坐标 自 加 0.1 

28 y += 0.1;  //y 坐标 自 加 0.1 

29 } else ( / / Fl ác 

30 x -= 0.1;  //x 坐标 自 减 0.1 

31 y -= 0.1; //y & bs BW O.1 

32 } 

dd var browser - getBrowser(); 

34 if(browser = "FF") ( 

35 img.style.transform = 'scale(' * x * ',' tyt) 
36 ) else | 

LN img.style.WebkitTransform = 'scale(' * x * ',' * y * ')''; 
38 } 

39 } 

40 «/script» 

41 «/html» 


关于 【代码 6-2】 的 说 明 : 


o 第 15 行 代码 通过 <img> 标 签 元 素 定义 了 一 幅 图 片 Cre 属性 定义 了 图 片 路 径 ， 并 定义 了 id 
性 值 )， 用 于 进行 图 片 比 例 缩放 的 测试 。 
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e 第 16-17 行 代 码 通 过 <input> 标 签 元 素 定 义 了 一 组 按钮 ， 并 定义 了 onclick 单 击 事件 方法 
(toScale() )， 用 于 进行 图 片 比例 缩放 操作 。 

e 第 21~22 行 代码 定义 了 两 个 变量 (x、y )， 用 于 定义 图 片 比例 缩放 的 因子 。 

© 第 23 ~39 行 代码 是 toScale() 事 件 方法 的 具体 实现 ,其 中 ,第 35 行 通过 scale() 方 法 修改 transform 
属性 值 进行 图 片 比例 缩放 操作 ， 第 37 行 代码 通过 scale() 方 法 修改 WebkitTransform 属性 值 进 
行 图 片 比例 缩放 操作 。 
transform 属性 和 WebkitTransform 属性 是 为 了 满足 浏览 器 兼容 性 而 使 用 的 。 第 33 行 代 码 通过 
调用 一 个 getBrowser() 方 法 返回 当前 浏览 器 类 型 ， 该 方法 定义 在 第 05 行 代 码 引 用 的 外 部 js 脚 
本 文件 中 ( src="js/ch06-js-browser.js" )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 6.1 所 示 。 


JavaScript 全 程 实例 


> C | © local 


&, 
| < 一 一 
— JavaScript JavaScript 
[3 ES 

图 6.1 JavaScript 实现 图 片 比例 缩放 


如 图 6.1 中 策 头 所 示 ， 中 间 图 片 截图 为 原始 大 小 ， 左 侧 图 片 截图 为 缩小 后 的 效果 ， 右 侧 图 片 截 
图 为 放大 后 的 效果 。 


63 图片 放大 镜 特 效 


在 HTML 网 页 图 片 设计 中 ， 还 有 一 种 非常 流行 的 图 片 放大 镜 特效 。 虽 然 图 片 放大 镜 特 效 与 前 
文中 介绍 的 图 片 比例 缩放 特效 有 些 类 似 ， 但 是 二 者 的 实现 方法 还 是 有 区 别 的 。 下 面 介 绍 一 个 通过 
JavaScript 实现 图 片 放大 镜 特 效 的 代码 实例 。 


【代码 6-3】( 详 见 源 代码 目录 ch06-js-img-zoom.html 文件 ) 


01 «!doctype html» 


02 «html lang-"en"» 
03 «head» 
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04 <!-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 

06 </head> 

07 <body> 

08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript 图 片 特效 - 图 片 放大 镜 特 效 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 


13 «div class-"small-box" id="smallBox"> 


ms 


14 «img src-"images/js-zoom.jpg"/» 

L5 «div class-"tool" id-"tool"»«/div» 

16 </div> 

17 «div class-"big-box" id-"bigBox"» 

18 «img src-"images/js-zoom.jpg" id-"bigImg"/» 

19 «/div» 

20 «/body» 

21 «script type-"text/javascript"» 

22 var smallBox - document.getElementById("smallBox"); // TODO: smallBox 
23 var tool = document.getElementById("tool"); // TODO: tool 
24 var bigBox - document.getElementById("bigBox"); // TODO: bigBox 
Pis var biglImg = document.getElementById ("bigImg"); 

26 Lt 

27 * 鼠标 进入 smallBox 区 域内 ， 显 示 tool 区 域 和 bigBox KER 

28 xí 

29 smallBox.onmouseenter = function () { 

30 tool.className - "tool active"; 

34 bigBox.className - "big-box active"; 

32 }; 

33 pra 

34 * ARAJ smallBox 区 域 ， 不 显示 tool 区 域 和 bigBox KER 

4n zr 

36 smallBox.onmouseleave = function () ( 

31 tool.className = "tool"; 

38 bigBox.className = "big-box"; 

39 }; 

40 iie 

41 * 鼠标 在 smallBox 内 移动 

42 Ff 

43 smallBox.onmousemove = function (e) { 


44 var e = window.event || e; WE SISSE 
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45 var x = e.clientX - this.offsetLeft - tool.offsetWidth / 2; 
46 var y = e.clientY - this.offsetTop - tool.offsetHeight / 2; 
47 El EIE 

48 x = 0;// 当 左 偏 移 出 小 盒子 时 ， 设 为 0 

49 

50 Lf (y € 0) (f 

51 y = 0;// 当 上 偏 移出 小 盒子 时 ， 设 为 0 

52 

sn if (x > this.offsetWidth - tool.offsetWidth) { 

54 x = this.offsetWidth - tool.offsetWidth; 

25 

56 if (y > this.offsetHeight - tool.offsetHeight) { 

sr y 7» this.offsetHeight - tool.offsetHeight; 

58 } 

59 tool.style.left =< x -* "px"; 

60 tool.style.top = y * "px"; 

61 bigImg.style.left = -x * 2 + "px"; 


62 bigImg.style.top - -y * 2 + "px"; 
63 ); 

64 </script> 

65 «/html» 


XT 【代码 6-3] 的 说 明 : 


e 第 13~16 行 代码 通过 <div> 标 签 元 素 定 义 了 一 个 小 盒子 (id="smallBox" )， 用 于 显示 原始 的 小 
图 片 。 其 中 ， 第 14 行 代 码 通过 <img> 标 签 元 素 定 义 了 该 原始 图 片 ; 第 15 行 代码 通过 <div> 标 
签 元 素 定义 了 一 个 工具 区 (id="tool" )， 用 于 显示 和 鼠标 在 图 片上 移动 时 的 一 个 黄色 区 域 。 

e 第 17~ 19 行 代码 通过 <div> 标 签 元 素 定 义 了 一 个 大 盒子 (id="bigBox" ), 用 于 显示 放大 镜 图 片 。 
其 中 ， 第 18 行 代码 通过 <img> 标 签 元 素 定义 了 该 放大 的 图 片 。 

e 第 29~32 行 代码 定义 了 小 盒子 (id="smallBox" ) 的 和 鼠标 进入 onmouseenter 事件 处 理 方法 。 
其 中 ， 第 30 行 和 第 31 行 代码 分 别 激活 了 工具 区 (id="tool" ) 和 大 盒子 (id="bigBox" ) EG. 

e 对 应 的 ， 第 36~39 行 代码 定义 了 小 盒子 (id-"smallBox" ) 的 鼠标 离开 onmouseleave 事件 处 
理 方法 。 其 中 , 第 37 行 和 第 38 行 代 码 分 别 茶 用 了 工具 区 (id="tool" ) £e X $T ( id-"bigBox" ) 
区 域 . 

e 第 43~63 行 代码 定义 了 小 盒子 (id="smallBox" ) 的 和 鼠标 移动 onmousemove 事件 处 理 方法 ， 
通过 窗口 客户 区 坐标 (clientX 和 clientY ) 属性 、 相 对 偏 移 量 (offsetLeft 和 offsetTop ) 属性 
和 控件 宽 高 尺寸 (offsetWidth 和 offsetHeight) 属性 ， 计 算出 工具 区 (id="tool" ) 相对 小 盒子 

(id="smallBox" ) 的 位 置 ， 并 在 大 盒子 (id="bigBox" ) 中 显示 图 片 放 大 镜 特 效 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 有 具体 效果 如 图 6.2 所 示 。 
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图 6.2 JavaScript 实现 图 片 放大 镜 特效 


64 图片 在 层 里 居中 


在 一 些 HTML 网 页 图 片 设计 的 场景 中 ， 将 图 片 设置 为 居中 显示 也 是 很 第 见 的 。 获 取 图 片 尺寸 
属性 并 通过 计算 得 出 图 片 在 父 级 层 元 素 中 的 定位 , 实现 图 片 在 层 里 居中 显示 的 效果 。 PII TER 
通过 JavaScript 实现 让 图 片 在 层 里 居中 显示 的 代码 实例 。 


【代码 6-4】( 详 见 源 代 码 目录 ch06-js-img-div-center.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 图 片 特效 - 图 片 在 层 内 居中 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center"> 


«img src-"images/js-center.jpg" id-"id-img"/» 
«/div» 
«/body» 
«script type-"text/javascript"» 


window.onload = function () { 
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19 var imgCenter = document.getElementById('id-img'); 


20 var width - imgCenter.width; 

"AE var height - imgCenter.height; 

22 var divCenter - imgCenter.parentNode; 

23 var widthOffset = divCenter.offsetWidth; 
24 var heightOffset = divCenter.offsetHeight; 
23 imgCenter.style.margin = "0 auto'; 

26 var padding = (heightOffset - height) / 2; 
27 divCenter.style.paddingTop = (32 + padding)-*'px'; 
28 } 

29 x/s¢ript> 

30 </html> 


关于 【代码 6-4】 的 说 明 : 

e 第 13~15 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 (id="id-div-center" )。 其 中 ， 第 14 行 代码 
通过 <img id="id-img"> 标 签 元 素 定 义 了 一 幅 图 片 ， 目 的 是 让 该 图 片 在 层 (id-"id-div-center" ) 
内 居中 显示 。 

e 第 18~28 行 代码 实现 了 在 页 面 初 始 化 过 程 中 , 让 图 片 在 层 内 居中 显示 的 效果 ; 具体 是 通过 获 
取 图 片 (id="id-img" ) 的 宽 高 尺寸 属性 (width 和 Height) 数值 和 层 (id="id-div-center" ) 宽 
高 尺寸 属性 CoffsetWidth 和 offsetHeight ) 数值 ， 计 算得 出 图 片 在 层 内 居中 显示 的 相对 位 置 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 6.3 所 示 。 
Ele Edit View History Bookmarks Tools Help 一 
Eg Javascript 全 程 实例 x pm 
G © localhost63: ER € 


JavaScript 图 片 特效 - 图 片 在 层 内 居中 


£ 


JavaScri pt 


一 一 一 一 一 一 一 一 


图 片 在 层 内 居中 显示 


图 6.3 JavaScript 实现 图 片 在 层 里 居中 
如 图 6.3 中 第 头 所 示 ， 图 片 在 外 层 层 框 〈 黑 实 线 ) 内 的 显示 位 置 是 居中 的 。 
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65 ”让 图 片 目 适应 框 的 大 小 


在 HTML 网 页 设计 中 ， 除 了 6.4 节 介 绍 的 图 片 居 中 显示 效果 ， 还 有 一 种 让 图 片 目 适应 框 的 大 
小 也 很 常见 。 下 面 介绍 一 个 通过 JavaScript 实现 让 图 片 自 适 应 框 的 大 小 的 代码 实例 。 


【代码 6-5】( 详 见 源 代码 目录 ch06-js-img-div-adjust.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


| 
| 
V 


08 «!-- 添加 文档 主体 内 容 
09 «header» 

10 «nav»JavaScript 图 片 特效 - 图 片 自 适应 框 的 大 小 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 «img src-"images/js-adjust.jpg"/» 

14 «div id-"id-div-adjsutl"» 


15 <img src="images/js-adjust.jpg" id="id-img1"/> 

16 </div> 

17 <div id="id-div-adjsut2"> 

18 <img src="images/js-adjust.jpg" id="id-img2"/> 

19 </div> 

20 </body> 

21 <script type="text/javascript"> 

22 window.onload = function () { 

23 var imgl = document.getElementById('id-imgl'); 
24 adjsutImgFitDiv (imgl); 

25 var img2 - document.getElementById('id-img2'); 
26 adjsutImgFitDiv (img2); 

21 }; 

28 eis 

29 * Adi1ust img to fit div 

30 * (param img 

34 i i 

32 function adjsutImgFitDiv (img) { 

33 var div = img.parentNode; 


34 var w = div.offsetWidth; 
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35 var h = div.offsetHeight; 
36 img.width = w - 2; 
E img.height = h - 2; 


38 } 
39 «script» 
40 </html> 


关于 【代码 6-5】 的 说 明 : 
e 第 13 行 代码 通过 <img> 标 签 元 素 定义 了 一 幅 图 片 ， 用 于 显示 原始 图 片 。 
e 第 14 ~ 16 行 代码 通过 <div id="id-div-adjsutl"> 标 签 元 素 定 义 了 一 个 放大 的 层 框 
(id-"id-div-adjsutl" )。 其 中 ， 第 15 行 代 码 通过 <img id="id-imgl"> 标 签 元 素 引 用 了 上 面 的 原 
始 图 片 ， 目 的 是 让 图 片 自 适 应 这 个 放大 的 层 框 。 
e 相应 的 ， 第 17 ~ 19 行 代码 通过 <div id='"id-div-adjsut2 心 标签 元 素 定 义 了 一 个 缩小 的 层 框 
(id-"id-div-adjsut2" )。 其 中 ， 第 18 行 代码 通过 <img id="id-imgl"> 标 签 元 素 同 样 引 用 了 上 面 
的 原始 图 片 ， 目 的 是 让 图 片 自 适 应 这 个 缩小 的 层 框 。 
o 第 32~38 行 代码 实现 了 一 个 自 定义 函数 (adjsutImgFitDiv() )， 用 于 实现 让 图 片 自 适 应 层 框 的 
算法 。 其 中 ,第 34 ~35 行 代码 通过 获取 层 框 (id="id-div-center" ) 宽 高 尺寸 属性 (offsetWidth 
和 offsetHeight ) 数值 ， 重 新 设 定 图 片 的 宽 高 尺寸 (注意 尺寸 的 小 幅 修正 量 ). 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 6.4 Pra. 


i) localhos 
JavaScript 图 片 特 效 - 图 片 自 适 应 框 的 大 小 


JavaScript 


图 6.4 JavaScript 实现 让 图 片 自 适应 框 的 大 小 


如 图 6.4 中 的 标识 所 示 ， 页 面 最 上 面 是 原始 图 片 ， 中 间 是 图 瞩目 适应 放大 层 框 的 效 打 ， 下 面 是 
图 片 目 适 应 缩小 层 框 的 效果 。 
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6.6 为 图 片 加 上 边框 


在 HTML 网 页 设计 中 ， 可 以 为 图 片 自 定义 边框 样式 ， 主 要 是 边框 的 闫 色 和 厚度 。 下 向 介绍 一 
个 通过 JavaScript 实现 为 图 片 加 上 边框 的 代码 实例 。 


【代码 6-6】( 详 见 源 代 码 目 录 ch06-js-img-border.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 «!-- 添加 文档 主体 内 容 
09 <header> 

10 «nav»JavaScript 图 片 特 效 - 为 图 片 加 上 边框 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 «div id="id-div-border"> 


— 


14 边框 颜色 : &nbsp; &nbsp; 

15 «select id-"id-sel-color" onchange-"on sel color changed(this.id);"» 
16 <option value-"none" selected»None«c/option» 

17 <option value="black">Black</option> 

18 <option value="red">Red</option> 

19 <option value="blue">Blue</option> 

20 </select> 

21 边框 厚度 : &knbsp; &nbsp; 

22 «select id-"id-sel-width" onchange-"on sel width changed(this.id);"» 
23 <option value-"0" selected»0«/option» 

24 «option value-"1"»1«/option» 

29 <option value="2">2</option> 

26 <option Value="3">3</option> 

27 </select> 

28 <img src-"images/js-border.jpg" id="id-img"/> 

29 </div> 

30 </body> 

31 <script type="text/javascript"> 

32 Pk 

33 * select image border color 


34 * @param thisid 


33 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
sil 
52 
o 
54 
29 
56 
zy 
58 
B 
60 
61 
62 
63 
64 
65 
66 
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ig 

function on sel color changed(thisid) { 
var selColor = document.getElementById (thisid); 
var color = selColor.value; 
var selWidth = document.getElementById('id-sel-width'); 
var width - selWidth.value; 
setImageBorder (width, color); 

) 

/** 

* select image border width 

* Qparam thisid 

ir 

function on sel width changed(thisid) { 
var selWidth = document.getElementById (thisid); 
var width - selWidth.value; 
var selColor = document.getElementById('id-sel-color'); 
var color = selColor.value; 
setImageBorder (width, color); 

) 

/** 

* set image border style 

* (param width 

* Qparam color 

i 

function setlImageBorder(width, color) { 
var img = document.getElementById ("id-img"); 
if(width == "O0" || color == "none") { 

img.style.border - ""; 

) else ( 


img.style.border = width + 'px solid ' -* color; 


) 


67 «/soripEb* 
68 «/html» 


关于 【代码 6-6】 的 说 明 : 


第 15 ~ 20 行 和 第 22 ~ 27 行 代码 分 别 通过 <selec 亿 标签 元 素 定义 了 两 个 下 拉 列 表 框 , 并 添加 了 
onchange 事件 处 理 方法 ， 用 于 选择 图 片 边框 颜色 和 厚度 。 

第 28 行 代 码 通 过 <img id="id-img"> 标 签 元 素 定义 了 一 幅 图 片 ， 用 于 测试 为 图 片 添 加 边框 的 操作 。 
第 36-42 行 和 第 47 ~ 53 行 代码 分 别 实现 了 边框 颜色 和 边框 厚度 这 两 个 下 拉 列 表 框 的 
onchange 事件 处 理 方法 ， 用 于 获取 用 户 选 择 的 颜色 值 和 厚度 值 ， 然 后 通过 调用 自 定义 函数 
setImageBorder(0) 来 设 定 图 片 边 框 的 颜色 和 厚度 样式 。 


108 | Javascript+Vue+React 全 程 实例 


e 第 59-66 行 代码 是 自 定义 函数 setfmageBorder(O) 的 实现 过 程 ， 先 判断 用 户 选 择 的 边框 颜色 或 
厚度 是 否 有 效 (只 要 厚度 为 "0" 或 颜色 为 "none" 这 两 个 条 件 有 一 个 成 立 ， 就 表示 图 片 边框 样式 
无 效 )， 再 通过 设 定 图 片 Style 对 象 的 border 属性 来 改变 图 片 颜色 和 边框 的 样式 。 

FAEH Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 6.5 所 示 。 


Ed JavaScript £ x | 十 园 Javascipt 人 x 十 一 


> Q © localhost s.. 三 > Q © localhost e [> 


JavaScript 图 片 特效 - 为 图 片 加 上 边框 JavaScript 图 片 特效 - 为 图 片 加 上 边框 


e 
JavaScript 


E ,Javascript 人 X | 十 一 


> CQ  Q localhost 


JavaScript 图 片 特 效 - 为 图 片 加 上 边框 


< 一 一 < 一 
JavaScript JavaScript 


6.5 JavaScript 实现 为 图 片 加 上 边框 
图 6.5 中 的 4 个 页 面 依次 显示 了 图 片 边框 在 不 同 颜 色 值 和 不 同 厚 度 值 下 的 效果 。 


67 显示 局 部 图 片 


其 实 每 一 幅 图 片 在 HTML 页 面 窗口 中 都 是 有 定位 尺寸 的 ， 通 过 对 该 定位 尺寸 进行 变换 计算 ， 
就 可 以 选取 图 片 的 茶 一 个 局 部 ， 并 在 页 面 中 进行 显示 。 下 面 看 一 个 通过 JavaScript 实现 显示 局 部 图 
片 的 代码 实例 。 


【代码 6-7】( 详 见 源 代码 目录 ch06-js-img-part.html 文件 ) 


01 «!doctype html» 


02 «html lang-"en"» 
03 «head» 
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<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 

</head> 

<style type="text/css"> 


div#id-div-img { 
background: url('images/js-part.jpg') 0 0 no-repeat; 
} 
«/style» 
«body» 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 图 片 特效 - 显示 局 部 图 片 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center"> 


«input type="button" value=" 切 换 显 示 局 部 图 片 " 
onclick="showImagePart ();"/» 
«/div» 
«div id-"id-div-img"»«/div» 
</body> 
<script type="text/javascript"> 


var arr — [[0, 0j], [-150, 0], [-150, -150], [0, -15011; 
var index - 0; 
function showImagePart() { 
var img - document.getElementById('id-div-img'); 
index-**; 
if (index -- 4) 
index - 0; 
var x = arr[index][0] + 'px'; 
var y = arr[index][1] + 'px'; 
img.style.backgroundPosition = x + ' ' + y; 
} 
</script> 
</html> 


关于 【代码 6-7】 的 说 明 : 


第 21 行 代码 通过 <div id="id-div-img"> 标 签 元 素 定 义 了 一 个 层 ， 该 元 素 看 似 是 一 个 空 层 ， 其 

实 不 然 。 请 读者 仔细 看 第 08 ~ 10 行 代码 定义 了 的 CSS 样式 代码 ， 第 09 行 代码 通过 背景 

background 样式 属性 为 层 <div id="id-div-img"> 元 素 定 义 了 背景 图 片 。 

第 19 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
(showImagePart() )， 用 于 测试 “切换 显示 局 部 图 片 ” 的 操作 。 

第 24 行 代码 定义 了 一 个 数组 坐标 (arr )， 标 记 局 部 图 片 的 定位 坐标 。 
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第 25 行 代码 定义 了 一 个 变量 (index )， 用 于 数组 坐标 (ar) 下 标的 索引 。 
第 26 ~ 34 行 代 码 是 事件 处 理 方法 ( showImagePart() ) 的 实现 过 程 , 通过 依次 将 数组 坐标 (arr) 
项 的 值 赋 给 图 片 Style 对 象 的 backgroundPosition 属性 来 实现 切换 显示 局 部 图 片 的 操作 。 


FEH Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 6.6 所 示 。 


Ul Javascript 全 得 实例 x INS 口 


u | X 


Q © localhost62342, v = Q » 


JavaScript 图 片 特效 - 显示 局 部 图 片 


JavaScript 图 片 特 效 - 显示 局 部 图 片 


| 切换 显示 局 部 图 片 
à 
& JavaScript 
D? 
C 
JavaScript 
El JavaScript FESH x--- uu 


JavaScript SESA 


m |x 


Q © localhostÃ3342; wv +.. » > Q  Q)localhost6334p 


JavaScript 图 片 特 效 - 显示 局 部 图 片 JavaScript 图 片 特 效 - 显示 局 部 图 片 


切换 号 示 局 部 图 片 切换 号 示 局 部 图 片 


A cript 
$ 


6.6 JavaScript 实现 切换 显示 局 部 图 片 
如 图 6.6 中 区 头 方 同 所 示 ， 页 面 中 分 别 演 示 了 “切换 显示 局 部 图 片 ”操作 的 效果 。 


68 动态 加 载 图 片 


在 HTML 网 页 图 片 设计 中 ， 动 态 加 载 图 片 是 一 项 很 实用 的 搁 术 。 在 大 型 项 目 开 发 中 ， 网 页 图 
片 资源 的 数量 往往 是 很 庞大 的 , 如 果 图 片 全 部 采用 静态 加 载 的 方式 是 非常 耗费 网 络 资源 的 , 而 且 用 
户 体验 也 会 很 糟糕 。 通过 动态 加 载 图 片 的 方式 , 在 实际 需要 时 将 图 片 进 行 加 载 显 示 就 很 合理 ， 用户 
体验 也 会 得 到 提升 。 下 面 看 一 个 通过 JavaScript 实现 动态 加 载 图 片 的 代码 实例 。 
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【代码 6-8】( 详 见 源 代码 目录 ch06-js-img-dyn-load.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 图 片 特效 - 动态 加 载 图 片 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
<input type="button" value=" 动 态 加 载 图 片 " 
onclick="dynLoadImg (this.id);"/> 


«img lazy src-"images/js-dyn-load.jpg" src="" alt=" 图 片 未 加 载 " 
id-"id-img"/» 


«/div» 
</body> 
<script type="text/javascript"> 
/** 
* dynamic load image 
* Qparam thisid 
Sr 
function dynLoadImg(thisid) { 
var img - document.getElementById('id-img'); 
img.src = img.attributes['lazy src']l.value; 
} 
«/script» 
«/html» 


关于 【代码 6-8】 的 说 明 : 
e 第 14 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
( dynLoadImg() )， 用 于 测试 “动态 加 载 图 片 ”的 操作 。 

o 第 15 行 代 码 通 过 <img> 标 签 元 素 定义 的 图 片 是 关键 所 在 ， 注 意 其 sre 属性 值 为 空 (页面 初始 
化 加 载 时 是 无 图 片 的 )， 而 增加 了 一 个 自 定义 属性 lazy_src， 其 属性 值 引 用 了 想 要 动态 加 载 的 
EAE, 

e 第 23-26 行 代码 是 事件 处 理 方法 (dynLoadlmg() ) 的 实现 过 程 ， 通 过 图 片 对 象 的 attributes 
属性 获取 自 定 义 属 性 lazy src 的 值 ， 然 后 赋 给 sre 属性 ， 从 而 实现 动态 加 载 图 片 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 6.7 所 示 。 
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Ed JavaScript: X | 十 一 E JavaScript: x | 十 —— 


CQ © localhost Zn 三 œ © localhost e» 


JavaScript 图 片 特 效 - 动态 加 载 图 片 JavaScript 图 片 特 效 - 动态 加 载 图 片 


&, 
< 


图 片 初 始 状态 未 加 载 JavaScript 
动态 加 载 图 片 ] 


图 6.7 JavaScript 实现 动态 加 载 图 片 
6.9 延迟 加 载 图 片 


6.8 节 中 介绍 的 动态 加 载 图 片 是 一 项 很 有 用 的 技术 ， 不 过 仍 需 要 人 工 来 操作 ， 不 太 适 用 于 页 面 
的 加 载 过 程 。 在 网 页 图 片 资源 的 数量 很 庞大 、 要 避免 全 部 采用 静态 加 载 方式 引起 阻塞 的 情况 下 ， 可 
以 通过 目 动 延 迟 加 载 图 片 的 方式 来 解决 问题 。 有 具体 来 讲 ， 束 是 通过 计时 器 设 定 时 间 延 迟 ， 然 后 使 用 
动态 加 载 技术 来 完成 图 片 的 加 载 。 下 面 看 一 个 通过 JavaScript 实现 延迟 加 载 图 片 的 代码 实例 。 


【代码 6-9】( 详 见 源 代码 目录 ch06-js-img-delay-load.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 
«body» 
«1-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 图 片 特效 - 延迟 加 载 图 片 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
<img lazy src="images/js-delay-load.jpg" src="" alt=" 图 片 正在 加 载 ..." 
id="id-img"/> 
«/div» 
</body> 


<script type="text/javascript"> 
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var timer = null;  // TODO: 计时 器 


window.onload = function (ev) { 


timer = setTimeout (image delay load, 3000); 


}; 
/** 
* image delay load 
xii 
function image delay load() { 
var img = document.getElementById('id-img'); 
img.src - img.attributes['lazy src'].value; 
timer - null; 
) 
«/script» 
«/html» 


关于 【代码 6-9】 的 说 明 : 

e 第 14 行 代码 通过 <img> 标 签 元 素 定义 了 一 幅 图 片 ， 用 于 测试 延迟 加 载 操 作 ， 其 sr 属性 值 为 
Z (页 面 初 始 化 加 载 时 是 无 图 片 的 )， 同 时 增加 了 一 个 自 定 义 属 性 lazy src， 其 属性 值 引 用 了 
想 要 延迟 加 载 的 图 片 路 径 。 

o 第 18 行 代码 定义 了 一 个 变量 (timer )， 作 为 计时 器 使 用 。 

e 第 20 行 代码 在 页 面 加 载 过 程 中 , 通过 setTimeout() 方 法 启动 了 一 个 计时 器 (timer )， 回 调 方法 
7j image delay load， 和 延迟 时 间 设 定 为 3000ms。 

e 第 25 ~29 行 代码 是 计时 器 回调 方法 ( image delay load ) 的 实现 过 程 ,通过 图 片 对 象 的 attributes 
属性 获取 自 定义 属性 lazy src 的 值 ， 然 后 赋 给 src 属性 ; 计时 器 回调 方法 会 在 设 定 的 延迟 时 间 

(3000ms ) 完成 后 被 调用 ， 从 而 实现 了 延迟 加 载 图 片 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 6.8 所 示 。 
| [ws | JavaScript X | 十 m | ["s| JavaScript X 十 
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6.8 JavaScript 实现 延迟 加 载 图 片 
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6.10 重新 加 载 验 证 码 图 片 


在 HTML 注册 登录 类 网 页 设计 中 ， 图 片 验证 码 方式 已 经 是 一 种 主流 技术 解决 方案 了 。 使 用 图 
片 验 证 码 可 以 有 效 避 免 某 些 恶意 注册 的 行为 ,有 效 提高 网 站 使 用 的 安全 性 。 不 过 ， 由 于 图 片 验 证 码 
是 通过 纯 JavaScript 脚本 语言 算法 模拟 生成 的 ， 因 此 有 时 也 会 出 现 迷 糊 不 清和 字体 过 小 的 问题 ， 此 
时 就 需要 重新 加 载 验证 码 图 片 ， 直 到 清晰 可 视 为 止 。 

下 面 看 一 个 通过 JavaScript 模拟 实现 重新 加 载 验证 码 图 片 的 代码 实例 。 


【代码 6-10】( 详 见 源 代码 目录 ch06-js-img-reload-verify.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 重 新 加 载 验证 码 图 片 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
<input type="button" value=" 重 新 加 载 验 证 码 图 片 " 
onclick="reloadVerityCode (this.id);"/> 
«img src-"images/verifycode.01.jpg" alt=" 图 片 未 加 载 " id="id-img" 
lazy src 1-"images/verifycode.01.jpg" 
lazy src 2-"images/verifycode.02.jpg" 
lazy src 3-"images/verifycode.03.jpg" 
/? 
«/div» 
</body> 
<script type="text/javascript"> 
var index = 1; 
/** 
* reload verify code image 
* (param thisid 
zr 
function reloadVerityCode(thisid) ( 
var img - document.getElementById('id-img'); 


index++; 
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3l if (index > 3) 


32 index = 


33 img.src = img.attributes['lazy src ' + index.toString()].value; 


34 } 
escrapt 
36 </html> 


关于 【代码 6-10】 的 说 明 : 
e 第 14 行 代 码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
( reloadVerityCode() )， 用 于 测试 “重新 加 载 验证 码 图 片 ” 的 操作 。 

e $ 15-19 行 代码 通过 <img> 标 签 元 素 定义 的 图 片 是 关键 所 在 。 注 意 ， 第 16 ~ 18 行 代码 增加 
了 一 组 自 定义 属性 (lazy src 1. lazy src 2 和 lazy_sre 3 )， 其 属性 值 引 用 了 想 要 重新 加 载 的 
图 片 验证 码 路 径 。 

e 第 28~34 行 代码 是 事件 处 理 方法 ( reloadVerityCode() ) 的 实现 过 程 , 通过 图 片 对 象 的 attributes 
属性 获取 自 定义 属性 (lazy src 1、lazy src 2 和 1lazy src 3) 的 值 ， 然 后 赋 给 src 属性， 从 而 
实现 重新 加 载 验证 码 图 片 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 6.9 所 示 。 
E] JavaScript X Dt LL x |+ 一 口 LL xt - a 
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重新 加 载 验证 码 图 片 重新 加 载 验证 码 图 片 


图 6.9 JavaScript 实现 重新 加 载 验证 码 图 片 
图 6.9 所 示 的 3 个 页 面 演示 了 “重新 加 载 验证 码 图 片 ” 操 作 的 效果 。 


第 7 章 文本 框 和 下 拉 列 表 框 特效 


本 章 介 绍 如 何 通过 JavaScript 来 实现 文本 框 和 下 拉 列 表 框 的 各 种 特效 ， 通 过 这 些 特效 来 丰富 
HTML 表单 的 设计 手段 和 展示 效果 。 


7.1 文本 框 和 下 拉 列 表 框 概述 


文本 框 和 下 拉 列 表 框 是 HTML 表单 中 使 用 频率 很 高 的 元 素 : 文本 框 可 以 用 来 接受 用 户 输 入 的 
信息 ; 下 拉 列 表 框 可 以 提供 给 用 己 厦 干 个 可 供 选 择 的 选项 数据 ， 都 是 非 第 实用 的 表单 控件 。 

在 HTML 表单 中 ， 通 过 使 用 <input> 标 签 元 素来 定义 文本 框 ， 通 过 使 用 <selecP> 标 签 元 素来 定 
义 下 拉 列 表 框 。 

文本 框 的 语法 格式 如 下 : 


【代码 7-1] 


/** 文本 框 定义 */ 
«input type-"text|password|email." /> 


KB, type 属性 是 必需 的 ， 用 于 指定 文本 框 的 类 型 ， 比 如 "text" 表 示 普 通 的 文本 输入 框 、 
"password" 表 示 密 码 输入 框 、"email" 表 示 Email 电子 邮件 格式 输入 框 等 。 
下 拉 列 表 框 的 语法 格式 如 下 : 


【代码 7-2] 
/** 下 拉 列 表 框 定义 */ 


«select» 
«option»«/option» 
«option»«/option» 


«/select» 


其 中 ，<option> 标 签 用 于 定义 下 拉 列 表 框 的 选项 。 

通过 JavaScript 脚本 语言 可 以 为 文本 框 和 下 拉 列 表 框 实现 多 种 特效 ， 比 如 只 带 下 划 线 的 文本 
框 、 默 认 大 小 写 的 文本 框 、 动 态 添 加 和 删除 下 拉 选 项 、 多 级 联动 下 拉 列 表 框 、 可 输入 的 下 拉 列 表 框 、 
市 格式 校 验 的 文本 框 等 。 后 续 将 为 读者 介绍 多 种 文本 框 和 下 拉 列 表 框 特效 的 代码 实例 。 
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7.2 ”只 市 下 划 线 的 文本 框 


在 HTML 表单 中 ， 文 本 框 默 认 样式 都 是 市 有 四 条 黑色 方形 边框 的 ， 在 网 页 中 这 个 样式 是 没有 
问题 的 。 但 是 ， 如 果 将 HTML 表单 打印 出 来 的 话 ， 文 本 框 的 四 条 黑色 方形 边框 样式 就 会 显得 很 突 
JU. WRA Word 文档 中 只 市 有 下 划 线 文本 框 样式 的 体验 好 。 那 么 ，HTML 表单 能 不 能 设计 出 只 市 
下 划 线 的 文本 框 呢 ? 其 实 ， 只 要 通过 设 定 文本 框 Style 对 象 的 border 属性 就 可 以 实现 。 

下 面 介 绍 一 个 通过 JavaScript 实现 只 带 下 划 线 的 文本 框 的 代码 实例 。 


【代码 7-3】( 详 见 源 代码 目录 ch07 js-input-underline.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 只 市 下 划 线 的 文本 框 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center"» 
只 带 下 划 线 的 文本 框 : gnbsp; gnbsp;<input type="text" value-"" 
id-"id-input-underline" /> 
«/div» 
</body> 
<script type="text/javascript"> 
/** 
* 初始 化 只 带 下 划 线 的 文本 杠 
* (iparam ev 
*/ 
window.onload = function (ev) { 
var inputUnderline = document .getElementById ("id-input-underline"); 
inputUnderline.style.borderColor = 'black'; 
// TODO: 设置 边框 颜色 
inputUnderline.style.borderStyle onl s 
// TODO: 设置 边框 样式 为 实 线 
inputUnderline.style.borderWidth 'Ü Ug Ipx 0'; 
// TODO: 设置 边框 大 小 ，0 代表 无 
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28 «/script» 
29 «/html» 


关于 【代码 7-3】 的 说 明 : 

e 第 14 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 实现 “只 市 下 划 线 的 文本 框 ”。 

o 第 24~26 行 代码 通过 分 别 设 定 文本 框 Style 对 象 的 边框 颜色 borderColor, 边框 样式 borderStyle 
和 边框 厚度 borderWidth 属性 值 实 现 了 只 带 下 划 线 的 文本 框 样式 。 比 较 关 键 的 是 第 26 行 代码 
定义 的 边框 厚度 borderWidth 属性 ，“0 0 Ipx 0” 数 值 组 合 分 别 表 示 “ 上 、 右 、 下 、 左 ”四 条 
边框 的 厚度 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 , 具体 效果 如 图 7.1 所 示 。 页 面 中 的 文本 框 ( 用 
户 输入 内 容 : 12345678900 是 只 带 有 下 划 线 样式 的 。 


只 带 下 划 线 的 文本 框 


只 市 下 划 线 的 文本 框 : 1234567890| 


7.1 JavaScript 实现 只 带 下 划 线 的 文本 框 


7.3. 用 正则 表达 式 验证 Email 格式 


Bir HTML 5 标准 规范 的 推出 ， 只 要 使 用 <input type="email"> 标 签 类 型 来 定义 文本 框 , 就 可 以 
LFF Email 格式 的 验证 了 。 在 早期 HTML 标准 规范 中 ， 如 果 想 验证 用 户 输 入 的 Email 格式 是 否 正 
确 ， 就 需要 使 用 JavaScript 正则 表达 式 功 能 来 实现 了 。 随 着 技术 标准 的 不 断 进 步 ，JavaScript 设计 
开发 的 门槛 越 来 越 低 , 早期 需要 手动 编写 代码 来 实现 的 功能 , 现在 设计 人 员 直 接 使 用 新 的 标准 规范 
就 可 以 完成 了 。 不过, 这 并 不 等 于 不 需要 设计 人 员 去 了 解 掌握 相关 技术 的 实现 原理 ,相信 大 多 数 读 
者 是 支持 这 个 观点 的 。 

下 面 介 绍 一 个 通过 JavaScript 实现 用 正则 表达 式 验 证 Email 格式 的 代码 实例 。 


【代码 7-4】( 详 见 源 代码 目录 ch07-js-input-regex-email.html 文件 ) 


<!doctype html» 
«html lang-"en"» 


«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 


07 
08 
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<body> 
<!-- 添加 文档 主体 内 容 --> 


09 «header» 


10 
T1 
12 
I3 
14 


Tes 
16 
T 
18 
19 
20 
2l 
22 
23 
24 
25 


26 
21 
28 


29 
30 
31 
32 
33 
34 
du 
36 


<nav> 用 正则 表达 式 验证 Email 格式 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center"» 
请 输入 Email:<input type="text" id-"id-input-email" 
onblur="validateEmail (this.id)"/> 


验证 结果 :<input type="text" id-"id-input-result" readonly> 
</div> 
</body> 
«script type="text/javascript"> 
/** 
* validate email format 
* (param thisid 
ul 
function validateEmail(thisid) ( 
var inputResult = document.getElementById ("id-input-result"); 
var inputEmail = document.getElementById (thisid); 
// TODO :获得 文本 框 的 DOM 
var email = inputEmail.value;  // TODO: 获得 用 户 输入 的 Email 
// TODO: 定义 正则 表达 式 
Var regexEmail = /^([a-zA-20-9 -])*G([a-zA-Z20-9 -])+ 
((X. [a-zA-Z0-9 -1(2,3]) (1,2]) $7; 
if (regexEmail.test(email)) { 
inputResult.value = "Email 校 验 通过 ."; 
} else { 
inputResult.value = "Email 校 验 失败 ,请 检查 输入 格式 ."; 
} 
} 
</script> 
«/html» 


天 于 【代码 7-4】 的 说 明 : 


o 第 14 行 代码 通过 <input id="id-input-email"> 标 签 元 素 定义 了 一 个 文本 框 ， 并 定义 了 onblur 事 


件 处 理 方 法 (validateEmail() )， 用 于 测试 “用 正则 表达 式 验 证 Email 格式 ”的 过 程 。 


o 第 15 行 代码 通过 <input> 标 签 元 素 定 义 了 另 一 个 文本 框 ( 只 读 readonly 类 型 )， 用 于 显示 验证 


Email 格式 的 结果 。 
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e 第 23~34 行 代码 是 validateEmail() 方 法 的 实现 过 程 ， 关 键 是 第 28 行 代码 定义 的 正则 表达 式 
(regexEmail ); 第 29~ 33 行 代 码 通 过 调用 正则 表达 式 (regexEmail ) 对 象 的 test( 方 法 来 验证 
Email 格式 是 否 正确 ， 然 后 将 验证 结果 显示 到 第 15 行 代码 定义 的 只 读 文本 框 中 。 


FAEH Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.2 所 示 。 


Eg Javascript 全 X | 十 一 Eg Javascript 全 X | 十 一 


Q © localhost .. (> >» @ ®© localhost v «0» 


用 正则 表达 式 验 证 Email 格式 用 正则 表达 式 验证 Email 格式 


请 输入 Email |kiingGemail.com 请 输入 Email 


验证 结果 : Email 校 验 通过 . 验证 结果 : Email 以 验 失 败 ,请 检查 输入 格式 . 


™ 
7.2 JavaScript 实现 用 正则 表达 式 验证 Email 格式 


如 图 7.2 中 第 头 所 示 , 在 文本 框 中 输入 正确 的 电子 邮件 地 址 (king@emailcom ) 后 , 提示 “Email 
校 验 通过 ”了 。 而 再 将 输入 内 容 中 的 “@” 字符 删除 后 ， 提 示 “Email 校 验 失 败 ， 请 检查 输入 格式 ”。 


7.4 ” 首 字 母 或 全 部 字母 大 写 


在 一 些 文 本 框 的 设计 场景 下 ， 需 要 将 用 户 输 入 文本 的 汉字 母 或 全 部 字母 自动 强制 转换 为 大 写 
格式 ，JavaScript 语法 中 的 String 对 象 提供 了 一 个 toUpperCase() 方 法 来 进行 字母 大 写 转 换 。 下 面 就 
看 一 个 通过 JavaScript 实现 首 字母 或 全 部 字母 大 写 的 代码 实例 。 


【代码 7-5】( 详 见 源 代码 目录 ch07-js-input-alphabet-upperhtml 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
«1-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 首 字母 或 全 部 字母 大 写 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
全 部 字母 大 写 :<input type="text" id="id-input-first" 
onblur="allAlphabetUpper (this.id);" /> 
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首 字母 大 写 :<input type="text" id-"id-input-all" 
onblur="firstAlphabetUpper (this.id);" /> 


</div> 
</body> 
<script type="text/javascript"> 
/** 
* Set all alphabet to upper case 
* (iparam thisid 
ul i 
function allAlphabetUpper(thisid) ( 
var allAlpha = document.getElementById (thisid); 
var valAll - allAlpha.value; 
var valNewAll - valAll.toUpperCase(); 
allAlpha.value = valNewAll; 
) 
/** 
* Set first alphabet to upper case 
* Qparam thisid 
Lr 
function firstAlphabetUpper(thisid) ( 
var firstAlpha = document.getElementById(thisid); 
var valFirst = firstAlpha.value; 
var firstUpper - valFirst.charAt(0).toUpperCase(); 
var valNewFirst = firstUpper + valFirst.substr(1, valFirst.length); 


firstAlpha.value - valNewFirst; 


«/script» 
</html> 


关于 【代码 7-5】 的 说 明 : 

o 第 14 行 代码 通过 <input id="id-input-first"> 标 签 元 素 定义 了 第 一 个 文本 框 ， 并 定义 了 onblur 事 
件 处 理 方法 (allAlphabetUpper() )， 用 于 测试 “全 部 字母 转换 为 大 写 ” 的 方法 。 

o 第 15 行 代 码 通过 <input id="id-input-all"> 标 签 元 素 定义 了 第 二 个 文本 框 ， 并 定义 了 onblur 事 
件 处 理 方 法 (firstAlphabetUpper() )， 用 于 测试 “ 首 字 母 转换 为 大 写 ” 的 方法 。 

e 第 23-28 行 代码 是 allAlphabetUpper() 方 法 的 实现 过 程 ， 关 键 是 第 26 行 代码 通过 使 用 
toUpperCase() 方 法 实现 将 全 部 字母 转换 为 大 写 的 操作 。 

e 第 33-39 行 代码 是 firstAlphabetUpper( 方 法 的 实现 过 程 ， 关 键 是 第 36 行 代码 先 通 过 使 用 
charAt() 方 法 获取 首 字母 , 再 通过 使 用 toUpperCase() 方 法 实现 将 首 字 母 转换 为 大 写 的 操作 。 5 
外 ， 第 37 行 代码 通过 使 用 substr() 方 法 获取 了 除去 首 字 母 之 后 的 全 部 字母 ， 然 后 将 大 写 首 字 
母 与 其 连接 到 一 起 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.3 和 图 7.4 所 示 。 
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图 JavaScript X | 十 一 口 E JavaScript X 十 一 o 
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首 字 母 或 全 部 字母 大 写 首 字母 或 全 部 字母 大 写 
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nsxs[ | 


图 7.3 JavaScript 实现 全 部 字母 大 写 
如 图 7.3 中 第 头 所 示 ， 页 和 面 中 显示 了 “全 部 字母 转换 为 大 写 ” 的 效果 。 


Ed JavaScipt X | T 一 Bd JavaScript X | 十 一 口 


> Œ © localhost se Q ®© localhost e 0» 


首 字母 或 全 部 字母 大 写 首 字母 或 全 部 字母 大 写 
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如 图 7.4 中 答 头 所 示 ， 页 面 中 显示 了 “ 首 字 母 转换 为 大 写 ” 的 效果 。 


7.5 只 能 输入 数字 的 文本 杠 


在 一 些 文本 框 的 设计 场景 下 ， 可 能 只 接受 用 户 的 输入 文本 为 纯 数 字 格 式 ， 那 么 通过 正则 表达 
式 吕 可 以 实现 对 数字 格式 的 验证 。 下 面 束 看 一 个 通过 JavaScript 实现 只 能 输入 数字 的 文本 框 的 代码 
实例 。 


【代码 7-6】( 详 见 源 代码 目录 ch07-js-input-regex-number.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 


<!-- 添加 文档 头 部 内 容 --> 


<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 


<header> 
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<nav> 只 能 输入 数字 的 文本 框 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
只 能 输入 数字 :<input type="text" id="id-input-number" 
onblur="validateNumber (this.id)"/» 
验证 结果 :<input type="text" id="id-input-result" readonly> 
</div> 
</body> 
«script type-"text/javascript"» 
/** 
* validate number format 
* (param thisid 
ui 
function validateNumber(thisid) { 
var inputResult = document.getElementById("id-input-result"); 
var inputNum = document.getElementById (thisid); 
var valNum = inputNum.value; 
var regexNum = /\b[0-9]+\b/; 
if (regexNum.test(valNum)) { 
inputResult.value = "数字 格式 验证 通过 ."; 
} else ( 


inputResult.value = "数字 格式 验证 未 通过 , 只 能 输入 数字 ."; 


} 


</script> 
«/html» 


关于 【代码 7-6】 的 说 明 : 


e 第 14 行 代码 通过 <input id="id-input-number"> 标 签 元 素 定 义 了 一 个 文本 框 ， 并 定义 了 onblur 
事件 处 理 方 法 (validateNumber() )， 用 于 测试 “只 能 输入 数字 的 文本 框 ”的 功能 。 
e 第 15 行 代 码 通过 <input> 标 签 元 素 定 义 了 另 一 个 文本 框 (Ast readonly 类 型 )， 用 于 显示 验证 
数字 格式 的 结果 。 
@ 第 23~33 行 代码 是 validateNumber() 方 法 的 实现 过 程 , 关键 是 第 27 行 代码 定义 的 正则 表达 式 
(regexNum); 第 28~32 行 代码 通过 调用 正则 表达 式 (regexNum ) 对 和 象 的 test() 方 法 来 验证 
数字 格式 是 否 正确 ， 然 后 将 验证 结果 显示 到 第 15 行 代码 定义 的 只 读 文 本 框 中 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 有 具体 效果 如 图 7.5 所 示 。 

如 图 7.5 中 箭头 所 示 ， 在 文本 框 中 输入 文本 (12345678900 后 ， 提 示 “ 数 字 格 式 验 证 通过 ”; 
在 文本 框 中 输入 文本 (1a2b3c) 后 ， 因 为 是 非 纯 数字 ， 所 以 提示 “数字 格式 验证 未 通过 ， 只 能 输入 
数字 ”。 
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lll JavaScript Xx | 十 EE 口 El JavaScript X 十 - o 


> Q © localhost e» 三 G © localhost e» 


只 能 输入 数字 的 文本 框 只 能 输入 数字 的 文本 框 


RR 入 数字 


验证 结果 : 数字 格式 验证 未 通过 ,只 能 输入 数字 . 


7.5 JavaScript 实现 只 能 输入 数字 的 文本 框 
7.6 判断 字符 的 个 数 


在 网 站 “留言 板 ” 或 “发 表 评 论 ” 的 页 和 面 中 ， 读 者 一 定 见 过 类 似 提示 信息 “还 可 以 继续 输入 
xx 个 字符 ”的 功能 设计 , 这 里 就 用 到 了 判断 用 户 输入 字符 个 数 的 算法 。 下面 就 看 一 个 明 过 JavaScript 
实现 判断 字符 〈 文 持 区 分 中 文字 符 ) 个 数 的 代码 实例 。 


【代码 7-7】( 详 见 源 代码 目录 ch07-js-input-count-char.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
«nav»JavaScript 文本 框 特效 - 判断 字符 的 个 数 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
请 输入 :<input type="text" id="id-input-count-char" 
onblur="countChar (this.id)"/» 
输出 :<input type="text" id="id-input-result" readonly> 
«/div» 
«/body» 
«script type-"text/javascript"» 
/** 
* 判断 字符 个 数 
* (iparam thisid 
i i 
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23 function countChar(thisid) { 

24 var vResult = document.getElementById ("id-input-result"); 
25 // 获 得 文本 框 的 DOM 

26 var vInput = document.getElementById (thisid); 


ZA var vText - vInput.value; 

28 var sumTotal = 0, sumEn = 0, sumCh = 0; 

29 sumTotal = vText.length; 

30 for (var i = 0; i < sumTotal; i++) { 

3. var c - vText.charAt(i); 

32 if (isChineseChar(c)) { 

33 sumCh--*; 

34 ) else ( 

9 sumEn++; 

36 

37 } 

38 vResult.value = "共计 " + sumTotal + "个 字符 ,汉字 字符 为 " + sumCh + 
"个 , 非 汉 字 字 符 为 " + sumEn + "个 ."; 

39 } 

40 "doas 

41 * 判断 汉字 字符 个 数 

42 * (param c 

43 * Qreturns (boolean) 

44 ui d 

45 function isChineseChar(c) { 

46 var reg = /[Nu4E00-Nu9FA5] /; // TODO: 定义 正则 表达 式 

47 return reg.test(c); 

48 } 

49 «/script» 

50 «/html» 


天 于 【代码 7-7】 的 说 明 : 


o 第 14 行 代码 通过 <input id="id-input-count-char'"> 标 签 元 素 定 义 了 一 个 文本 框 ,并 定义 了 onblur 
事件 处 理 方法 (countChar(0) )， 用 于 测试 “判断 字符 的 个 数 ” 的 功能 。 

e 第 15 行 代码 通过 <input> 标 签 元 素 定 义 了 另 一 个 文本 框 (ist readonly 类 型 )， 用 于 显示 判断 
字符 个 数 的 结果 。 

e 第 23~39 行 代码 是 countChar() 方 法 的 实现 过 程 ， 关 键 是 第 32 行 代码 调用 的 isChineseChar() 
方法 ， 该 方法 用 于 判断 字符 是 否 为 汉字 字符 。 

e 第 45~48 行 代码 是 isChineseChar() 方 法 的 实现 过 程 。 其 中 ， 第 46 行 代码 定义 的 正则 表达 式 
可 用 于 判断 汉字 字符 ， 第 47 行 代码 通过 调用 test() 方 法 返回 判断 结果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.6 所 示 。 
如 图 7.6 中 第 关 所 示 ， 提 示 信 息 中 显示 了 总 计 字 符 个 数 、 汉 字 字 符 个 数 和 非 汉 字 字 符 个 数 。 
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JavaScript 全 程 实例 X | 十 


G © localhost:63342 


JavaScript 文本 框 特效 - 判断 字符 的 个 数 


请 给 入: |13 汉 字 2b 字 符 3c 判 断 


输出 : 共计 12 个 字符 ,汉字 字符 为 6 个 , 非 汉字 字符 为 6 个 . 


图 7.6 JavaScript 实现 判断 字符 的 个 数 功 能 


7.7 文本 框 获取 焦点 后 目 动 清除 内 容 


在 用 户 需 要 重新 输入 文本 框 内 容 的 场景 下 ， 往 往 用 户 要 手动 清除 文本 框 中 的 原始 内 容 ， 操 作 
起 来 不 太 方 便 。 于 是 ， 设 计 人 员 就 想到 了 利用 文本 框 获取 焦点 onfocus() 事 件 来 日 动 消除 文本 框 中 


【代码 7-8】( 详 见 源 代码 目录 ch07-js-input-focus-clear.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 

</head> 

<body> 

<!-- 添加 文档 主体 内 容 --> 


<header> 


</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
文本 框 : &nbsp; &nbsp; 
<input type="text" 
value=" 文 本 框 获取 焦点 后 自动 清除 内 容 " 
id-"id-input-focus-clear" 
onfocus-"focusClearContent (this.id)"/»«br/» 
«/div» 
</body> 


<script type="text/javascript"> 
/** 


* on input get focus, clear it's content 
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* (iparam thisid 
i i 


function focusClearContent(thisid) { 


var input = document.getElementById (thisid); 


input.value = ''; // TODO: 把 文本 内 容 的 值 设 为 空 字符 
) 
3U cisocripit. 
31 «/html» 


关于 【代码 7-8】 的 说 明 : 

e 第 15~18 行 代码 通过 <input id="id-input-focus-clear"> 标 签 元 素 定义 了 一 个 文本 框 ， 并 定义 了 
onfocus 事件 处 理 方法 ( focusClearContent() )， 用 于 测试 “文本 框 获取 焦点 后 自动 清除 内 容 ” 
的 操作 。 

e 第 26~29 行 代码 是 focusClearContent() 方 法 的 实现 过 程 ， 关键 是 第 28 行 代码 , 通过 将 文本 框 


园 Javascript 全 程 实例 Xx | 十 一 uu E JavaScript SRSA | 十 一 口 


G © localhost zm 1» 三 > @ | © localhost TTE T E 


文本 框 获取 焦点 后 自动 清除 内 容 文本 框 获取 焦点 后 自动 清除 内 容 


文本 框 : | 文本 框 获取 焦点 后 自动 清除 内 容 


获取 焦点 后 , 自动 清空 内 容 


7.7 JavaScript 实现 文本 框 获 取 焦点 后 上 自动 清除 内 容 


N 


7.8 清空 所 有 文本 型 输入 框 


用 户 在 操作 表单 时 ， 有 时 需要 清空 有 所 有 文本 型 输入 框 的 内 容 ， 这 些 文本 框 不 但 包括 “text” 类 
型 ， 还 包括 “password” 或 “email” 类 型 等 。 此 时 ， 融 需要 设计 人 员 先 根据 <input> 标 俭 元 素 的 type 
属性 来 判断 再 有 针对 性 地 进行 操作 。 下 面 看 一 个 通过 JavaScript 实现 清空 所 有 文本 型 输入 框 的 代码 
实例 。 


【代码 7-9】( 详 见 源 代码 目录 ch07-js-input-all-clear.html 文件 ) 


<!doctype html» 
«html lang-"en"» 


«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
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JavaScript Vue- React 全 程 实例 


«/head» 
«body» 
«1-- 添加 文档 主体 内 容 --> 


<header> 


<nav> 清 空 所 有 文本 型 输入 框 </nav> 


</header> 
<!-- 添加 文档 主体 内 容 --> 


«div id-"id-div-center"» 


文本 框 : &nbsp; &nbsp; «input type="text" value=" 输 入 框 text XÆ" /»«br/»«br/» 
XEHE : &nbsp; &nbsp; <input type="password" value-"123456"/»«br/»«br/» 
文本 框 :gnbsp; &nbsp; <input type="email" value="king@email.com"/> 
«br/»«br/» 
«button onclicks"clearAllText () "> 清空 输入 框 (text)</button><br/> 
«button onclick-2"clearAllInput () "> 清空 输入 框 (text |password|email) 
«/button»«br/» 


«/div» 
</body> 


<script type="text/javascript"> 


/** 
* clear input, type - text 
Er 
function clearAllText() { 
var inputs = document.getElementsByTagName ("input"); 
for(let i-0; i«inputs.length; i-*-*) ( 
if(inputs[i].type -- "text") ( 


inputs[i].value - ""; 
} 
} 
} 
/** 
* clear input, type - text|password|email 
i i 


function clearAllInput() 1 
var inputs - document.getElementsByTagName ("input"); 
for(let i-0; i«inputs.length; i++) { 
if(inputs[i].type == "text" ||inputs [i] .type== 
"password" | |inputs [i] .type == "email") { 


inputs [i] .value = ""; 
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44 </script> 
45 </html> 


关于 【代码 7-9】 的 说 明 : 


e 第 14~16 行 代码 通过 <inpu 亿 标签 元 素 定 义 了 一 组 文本 框 , LH type 属性 值 分 别 为 text 类 型 、 
password 类 型 和 email 类型， 用 于 测试 “清空 所 有 文本 型 输入 框 ” 的 操作 。 
o 第 17 行 代码 通过 <button> 标 签 元 素 定义 了 第 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 
( clearAIlIText() )， 用 于 进行 清除 全 部 text 类 型 文本 框 中 内 容 的 操作 。 
o 18 行 代码 通过 <button> 标 签 元 素 定 义 了 第 二 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 
( clearAllInput() )， 用 于 进行 清除 全 部 text 类 型 、password 类 型 和 email 类 型 文本 框 中 内 容 的 
操作 。 
e 第 25~32 行 代码 是 事件 处 理 方法 (clearAllText( ) 的 实现 过 程 ， 关 键 是 第 28 行 代 码 ， 先 通 
过 判断 文本 框 的 type 属性 值 是 否 为 text 类 型 再 进行 清空 所 有 文本 型 输入 框 的 操作 。 
e 第 36~ 43 行 代码 是 事件 处 理 方法 (clearAllInput( ) 的 实现 过 程 ， 与 clearAllText() 方 法 的 区 别 
就 是 第 39 行 代 码 ， 先 通过 判断 文本 框 的 type 属性 值 是 否 为 text 类 型 、password 类 型 和 email 
类 型 中 的 任 一 类 ， 再 进行 清空 所 有 文本 型 输入 框 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.8 所 示 。 


JavaScript € X | 十 一 口 JavaScript 全 程 :X | 十 一 口 JavaScript 全 程 :X | 十 一 口 


Q! ®© localhcst e» > CQ © localhost - » Q ®© localhost e 2» 


清空 所 有 文本 型 输入 框 清空 所 有 文本 型 输入 框 清空 所 有 文本 型 输入 框 


文本 框 : | 输入 框 text 类 型 


文本 框 : kingGemail.com 文本 框 : |king@email.com 


| 清空 输入 框 (text) 清空 输入 碟 (text) EN 
i588 A f (text password email) 清空 输入 框 (text|passwordlemail 清空 输入 框 (text|passwordlemai 


7.8 JavaScript 实现 清空 所 有 文本 型 输入 框 


如 图 7.8 中 第 头 所 示 ， 中 间 的 页 和 面 为 原始 状态 ， 左 侧 页 和 面 为 “清空 文本 框 (text)” 内 容 后 的 效 
果 ， 右 侧 页 面 为 “清空 文本 框 (textlpasswordlemail)” 内 容 后 的 效果 。 


7.9 校 验 电话 号 码 格 式 


在 HTML 页 和 面 表单 中 ， 校 验 用 户 录 入 的 电话 号 码 格式 是 任 正 确 是 一 项 很 第 用 的 设计 功能 。 本 
节 主 要 以 国内 和 背 用 的 固定 电话 和 移动 电话 号 码 为 样本 目标 ， 通 过 JavaScript 正则 表达 式 来 测试 完成 
校 验 电话 号 码 格式 的 操作 。 下 面 看 一 个 通过 JavaScript 实现 校 验 电话 号 码 格式 的 代码 实例 。 
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【代码 7-10】( 详 见 源 代码 目录 ch07-js-input-regex-tel.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </tit1le> 
06 </head> 

07 «body» 


08 «!-- 添加 文档 主体 内 容 --» 
09 <header> 


10 «nav»JavaScript 文本 框 特效 - 校 验 电话 号 码 格式 </nav> 
11 </header> 
12 «!-- 添加 文档 主体 内 容 --> 


13 «div id-"id-div-center"» 


14 电话 号 码 :<input type="text" id="id-input-tel" 
onblur-"validateTel (this.id)"/> 

15 验证 结果 :<input type="text" id="id-input-result" readonly» 

16 «/div» 

17 </body> 

18 «script type-"text/javascript"» 

19 function validateTel(thisid) { 

20 var vResult = document.getElementById ("id-input-result"); 

2 var vTel = document.getElementById (thisid); 

22 var vTelVal - vTel.value; 

23 var regexTel = /^[(0-9)-]*$/; 

24 var regexMobile = /^1[3578]\d{9}$/; 

25 var regexTell = /^0\d{2}-\d{8}$1^0\d{3}-\d{7}$/; 

26 Var regexTel2 = /^\(0\d{2}\)\d{8}$1^\(0\d{3}\) \d{7}$/; 

21 if (regexTel.test(vTelVal)) { 

28 if (regexMobile.test(vTelVal)) { 

29 vResult.value = "正确 的 手机 号 码 格式 ."，; 

30 } else if (regexTell.test(vTelVal) || regexTel2.test(vTelVal))( 

31 vResult.value = "正确 的 固定 电话 号 码 格式 ."，; 

32 ) else { 

33 vResult.value = "电话 号 码 格式 不 正确 , 请 重新 检查 ."; 

34 } 

35 ] else [ 

36 vResult.value = "电话 号 码 格式 不 正确 , 请 重新 检查 ."; 

37 } 

38 } 


39 «fscripL» 
40 </html> 
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关于 【代码 7-10】 的 说 明 : 


第 14 行 代 码 通过 <input id="id-input-tel"> 标 签 元 素 定 义 了 一 个 文本 框 ， 并 定义 了 onblur 事件 
eg ( validateTel() )， 用 于 测试 “ 校 验 电话 与 码 格式 ”的 操作 。 
第 15 行 代码 通过 <input> 标 签 元 素 定义 了 男 一 个 文本 框 (只 读 readonly 类 型 )， 用 于 校 验 电话 
号 码 格式 的 结果 。 
: 19 ~ 38 行 代码 是 validateTel() 方 法 的 实现 过 程 , 关键 是 第 23 ~ 26 行 代码 定义 的 一 组 正则 表 
达 式 ， 分 别 用 来 验证 手机 号 码 和 固定 电话 号 码 。 
> 第 23 行 代码 定义 的 正则 表达 式 ( regexTel ) 是 对 用 户 输入 电话 号 码 的 一 个 大 体 测试 。 因 为 
国内 手机 号 码 只 包括 数字 ( 不 考虑 国际 区 号 )， 国 内 固定 电话 的 区 号 和 电话 号 码 之 间 一 般 
通过 短 横 杠 “-” 或 小 括号 “( )” 来 连接 。 因 此 ,正则 表达 式 (regexTel) 只 对 数字 和 短 横 
杠 “-” 或 小 括号 “( ) 来 进行 验证 。 
> 第 24 行 代码 定义 的 正则 表达 式 ( regexMobile ) 是 对 用 户 输入 手机 号 码 的 一 个 较为 精确 的 
测试 。 国 内 手机 号 码 是 固定 的 11 位 数字 ( 不 考虑 国际 区 号 )， 且 目前 的 首位 号 码 固定 为 数 
字 1， 第 二 位 号 码 为 固定 数字 3、5、7 和 8。 
> 525-26 行 代 码 定 义 的 正则 表达 式 (regexTell 和 regexTel2 ) 是 对 用 户 输入 固定 电话 号 码 
的 一 个 较为 精确 的 测试 。 正 则 表达 式 (regexTell ) 针对 的 是 使 用 短 横 杠 “-” 符 号 连接 的 
固定 电话 ， 而 正则 表达 式 ( regexTel2 ) 针对 的 是 使 用 小 括号 “( ) 符号 连接 的 固定 电话 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 针 对 手机 号 码 的 具体 效果 如 图 7.9 所 示 。 


a JavaScript 全 程 实例 X | 十 一 口 JavaScript 全 程 实例 X | 十 Cz) 加 


Œ ®© localhost ee s» Q © localhost 05» 


JavaScript 文本 框 特效 - 校 验 电话 号 码 格式 JavaScript 文本 框 特效 - 校 验 电话 号 码 格式 


mss [mo | sasa [sm | 
验证 结果 : 正确 的 手机 号 码 格式 . 验证 结果 : 包 话 号 码 格 式 不 正确 ,请 重新 检查 . 


\ 


7.9 JavaScript 实现 校 验 电话 号 码 格式 〈 手 机 号 码 ) 


针对 固定 电话 号 码 的 具体 效果 如 网 7.10 所 示 。 


EJ JavaScript SRSA x | 十 一 D E JavaScript SRSA x | 十 一 DOD X 


Q © localhost T 05» œŒ © localhost eu» 


JavaScript 文本 框 特效 - 校 验 电话 号 码 格式 JavaScript 文本 框 特 效 - 校 验 电话 号 码 格 式 


电话 miS 


验证 结果 : 正确 的 固定 电话 号 码 格式 . 验证 结果 : 正确 的 国定 电话 号 码 格式 ， 


图 7.10 JavaScript 实现 校 验 电话 号 码 格 式 ( 固 定 电话 号 码 ) 
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7.10 ”鼠标 划 过 文本 框 改 变 其 衣 景 色 


如 末 想 突出 显示 HTML 表单 中 比较 重要 的 文本 框 ， 那 么 当 用 户 鼠 标 划 过 该 文本 框 时 改变 其 表 景 
颜色 是 一 个 不 错 的 选择 。 下 面 看 一 个 通过 JavaScript 实现 鼠标 划 过 文本 框 改变 其 背景 色 的 代码 实例 。 


【代码 7-11] ( 详 见 源 代 码 目录 ch07-js-input-mouseover-bgcolor.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --» 

05 «title»JavaScript 全 程 实 例 </tit1le> 
06 </head> 

07 «body» 


08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 <nav> 鼠 标 划 过 文本 框 改变 其 背景 色 </nav> 
11 «/header» 

12 «!-- 添加 文档 主体 内 容 --> 

13 «div id-"id-div-center"» 


14 «1-- 定义 文本 框 --> 


15 文本 框 :gnbsp; &nbsp; <input type-"text"/» 

16 文本 框 :gnbsp; &nbsp; <input type="text"/> 

17 文本 框 :gnbsp; &nbsp; <input type-"text"/» 

18 «/div» 

19 «/body» 

20 «script type-"text/javascript"» 

21 pe 

22 * window on load event 

23 * @param ev 

24 ui 

25 window.onload = function (ev) { 

26 var inputs = document.getElementsByTagName('input'); 
27 // TODO: 遍历 所 有 文本 框 

28 for (var i = 0; i < inputs.length; itt) 1 

29 var input = inputs[i]; // TODO: 当前 文本 框 

30 input.onmouseover = function () { 

31 this.style.backgroundColor = 'red'; // TODO: 修改 背景 色 为 红色 
32 E 

33 input .onmouseout = function () { 


34 this.style.backgroundColor = ''; // TODO: 恢复 背景 色 
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23 
36 


34 
38 </script> 
39 «/html» 


关于 【代码 7-11】 的 说 明 : 

e 第 15~17 行 代码 通过 <inputtype="text"> 标 签 元 素 定义 了 一 组 文本 框 , 用 于 实现 “ 息 标 划 过 文 
本 框 改变 其 背景 色 ” 的 功能 。 

e 第 28-36 行 代码 通过 for 循环 语句 遍历 全 部 文本 框 ， 并 依次 为 每 一 个 文本 框 添加 鼠标 经 过 
onmouseover 事件 处 理 方法 和 和 鼠标 移出 onmouseout 事件 处 理 方法 ， 在 事件 处 理 方 法 中 相应 地 
39 SORAE IS Jn Ao UR 3 EA, 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 有 具体 效果 如 图 7.11 所 示 。 


E ,avascript:X | 十 一 国 JavaScript: X | 十 一 国 JavaScript: X | 十 一 


> @ | © localhost LL Cc — CQ | © localhost Zn 三 -) > C! |© localhost e» 
息 标 划 过 文本 框 改变 其 背景 色 鼠标 划 过 文本 框 改 变 其 背景 色 鼠标 划 过 文本 框 改变 其 背景 色 


ma | 上 xm[ | 
e wo z+ EE v 


图 7.11 JavaScript 实现 鼠标 划 过 文本 框 改变 其 背景 色 
如 图 7.11 中 第 头 所 示 , 页 面 中 分 别 演示 了 鼠标 依次 划 过 每 个 文本 框 后 改变 其 背景 颜色 的 效果 。 


7.11 设置 下 拉 列 表 框 的 值 


在 HTML 页 面 中 ， 用 户 可 以 通过 下 拉 列 表 杠 手动 选取 目 己 需要 的 选项 值 。 不 通过 手动 选择 ， 
能 不 能 通过 程序 设置 下 拉 列 表 框 的 值 呢 ? 答案 是 完全 可 以 的 , 而 且 通 过 JavaScript 脚本 语言 设置 下 拉 列 
表 框 的 值 是 一 项 非常 有 用 的 功能 。 下 面 看 一 个 通过 JavaScript 实现 设置 下 拉 列 表 框 的 值 的 代码 实例 。 
【代码 7-12] ( 详 见 源 代 码 目录 ch07-js-select-set-value.html 文件 ) 


<!doctype html» 
«html lang-"en"» 


«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
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06 </head> 

07 «body» 

08 «!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 设 置 下 拉 菜 单 的 值 </nav> 
11 «/header» 

12 «!-- 添加 文档 主体 内 容 --> 

13 «div id-"id-div-center"» 


14 <!-- 定义 下 拉 列 表 框 --» 


15 设置 颜色 : gnbsp; &nbsp; 

16 <select name="selSetColor" id="idSelSetColor"> 
17 <option> 请 选择 . . .</option> 

18 <option value-"red"»Red«/option» 

19 «option value-"yellow"»Yellow«/option» 

20 <option value-"green"»Green«/option» 

21 «/select» 


22 <!-- 定义 Radio 单 选 --» 

23 请 选择 颜色 : &nbsp; &nbsp; 

24 «input name-"radioColor" value-"red" 
onclick-2"setSelValue(this.value);" checked/»Red 

25 «input name-"radioColor" value-"yellow" 
onclick-2"setSelValue (this.value);"/»Yellow 

26 «input name-"radioColor" value-"green" 


onclick-2"setSelValue (this.value);"/»Green 


27 «/div» 

28 «/body» 

29 «script type-"text/javascript"» 

30 window.onload = function (ev) { 

341 var idSel - document.getElementById('idSelSetColor'); 
32 var arrRadio - document.getElementsByName ("radioColor"); 
33 for (let 1 = 0; 1 < arrRadio.lengqth; 1t) | 

34 if (arrRadio[i].checked) { 

35 idSel.value = arrRadio[i].value; 

36 } 

37 } 

38 }; 

39 Ég 

40 * set select value 

41 * Qparam val 

42 i 

43 function setSelValue (val) { 

44 var idSel = document.getElementById('idSelSetColor'); 


45 idSel.value = val; 
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46 } 


47 «/script» 
48 «/html» 


关于 【代码 7-12】 的 说 明 : 


e 第 16~21 行 代码 通过 <select id="idSelSetColor"> 标 签 元 素 定义 了 一 个 下 拉 列 表 框 ， 并 定义 了 
一 组 颜色 选项 ， 用 于 实现 “设置 下 拉 列 表 框 的 值 ”的 操作 。 

e 第 24-26 行 代码 通过 <input type="radio"> 标 签 元 素 定 义 了 一 组 单 选 框 ， 并 分 别 定 义 了 单 击 
onclick 事件 处 理 方 法 (setSelValue() )， 用 于 设置 上 面 定 义 的 下 拉 列 表 框 的 颜色 值 。 其 中 ， 第 
24 行 代码 定义 的 单 选 框 (Red) 通过 添加 “checked” 属性 ， 被 定义 为 默认 选中 项 。 

e 第 30-38 行 代码 定义 了 页 面 加 载 onload 事件 处 理 方法 ， 首 先 判断 哪 一 项 单 选 框 是 被 选中 

(checked 属性 值 为 tue ) 的 , 然后 将 该 单 选 框 的 颜色 值 设置 为 下 拉 列 表 框 的 初始 化 颜色 值 选 项 。 

© 第 43 ~ 46 行 代码 是 setSelValue() 事 件 处 理 方法 的 实现 过 程 ， 通 过 将 传递 进来 的 单 选 框 颜色 值 

赋 给 下 拉 列 表 框 ， 实 现 通过 JavaScript 脚本 语言 “设置 下 拉 列 表 框 的 值 ”的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.12 所 示 。 
如 图 7.12 中 和 葡 头 所 示 ， 当 用 户 通 过 单 选 框 选择 颜色 后 ， 下 拉 列 表 框 的 颜色 选项 也 被 同步 设置 
为 对 应 的 颜色 了 。 


图 JavaScript: X | 十 一 Ell JavaScript- X 十 - 


设置 下 拉 莱 单 的 值 设置 下 拉 菜 单 的 值 设置 下 拉 菜单 的 什 


请 选择 颜色 : Red OYellow O Green 请 选择 颜色 : ORed (9 velow O Green 请 选择 颜色 : ORed O 〇 Yellow (9 Green 


7.12 JavaScript 实现 设置 下 拉 列 表 框 的 值 
7.12 ”动态 添加 下 拉 列 表 框 选项 


7.11 节 中 介绍 了 设置 下 拉 列 表 框 的 值 ， 本 节 继 续 介绍 如 何 动态 添加 下 拉 列 表 框 的 选项 。 在 
HTML DOM 对 象 中 ， 下 拉 列 表 框 Select 对 象 中 定义 有 一 个 options 集合 ， 代 表 着 下 拉 列 表 框 中 全 
部 选项 的 集合 。 通 过 调用 options 集合 的 add(option[,]) 方 法 ， 就 可 以 为 Select 对 象 添加 一 个 选项 。 
下 面 看 一 个 通过 JavaScript 实现 动态 添加 下 拉 列 表 框 选项 的 代码 实例 。 


【代码 7-13] ( 详 见 源 代码 目录 ch07-js-select-add-option.html 文件 ) 


01 «!doctype html» 


02 «html lang-"en"» 
03 «head» 
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04 <!-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 <!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 <nav> 动 态 添 加 下 拉 列 表 框 选项 </nav> 

11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 «div id-"id-div-center"» 


14 «table» 

15 «tr» 

16 <th> 设 置 颜色 : &nbsp; &nbsp; «/th» 

17 «td» 

18 <!-- 定义 下 拉 列 表 框 --> 

19 <select name="selSetColor" id="idSelSetColor"> 
20 <option> 请 选择 . . .</option> 

21 <option value="red">Red</option> 

22 <option value="yellow">Yellow</option> 
23 <option value="green">Green</option> 
24 </select>&nbsp; &nbsp; 

25 «/td» 

26 <th> 添 加 颜色 : gnbsp; &nbsp; «/th» 


27 <td><input type="button" id="id-add-color" value=" 添 加 颜色 " 
onclicksz"addColor()"/»«/td» 


28 «/tr» 

29 -EE 

30 <td></td> 

31 «td»«/td» 

32 «td»value:&nbsp; &nbsp; </td> 

33 <td><input type="text" id-"id-sel-val" value-""/»«/td» 
34 /Er 

45 SEES 

36 «td»«/td» 

37 «td»«/td» 

38 «td»text: &nbsp; &nbsp; </td> 

39 <td><input type="text" id-"id-sel-text" value-""/»«/td» 
40 «Er» 

41 «/table» 

42 «/div» 

43 </body> 


44 <script type-"text/javascript"» 
45 Jr 
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46 * add option color 

47 * (param thisid 

48 Er 

49 function addColor(thisid) { 

50 var idSel - document.getElementById('idSelSetColor'); 
gt var idSelVal - document.getElementById('id-sel-val'); 
52 var idSelText = document.getElementById('id-sel-text'); 
29 var val - idSelVal.value; 

54 var text - idSelText.value; 

25 idSel.options.add(new Option(val, text)); 

56 } 

57 «fsScrFIDES 

58 «/html» 


关于 【代码 7-13】 的 说 明 : 


e 第 19~24 行 代码 通过 <select id="idSelSetColor"> 标 签 元 素 定义 了 一 个 下 拉 列 表 框 ， 并 初始 化 
了 一 组 颜色 选项 ， 用 于 测试 “动态 添加 下 拉 列 表 框 选项 ”的 操作 。 

e 第 27 行 代码 通过 <input type="button"> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 
方法 (addColor() )， 用 于 将 用 户 输 入 的 选项 值 ( 见 第 33 行 和 第 39 行 代码 的 解释 ) 添加 进 下 
拉 列 表 框 。 

e 第 33 行 和 第 39 行 代码 分 别 通过 <input type="text"> 标 签 元 素 定 义 了 一 组 文本 框 ， 用 于 用 户 输 
入 下 拉 列 表 框 选项 <option> 的 value 属性 值 和 text 文本 内 容 。 

e 第 49~ 56 行 代 码 是 addColor0) 事 件 处 理 方 法 的 实现 过 程 ， 首 先 获取 用 户 输 入 的 选项 <option> 
值 ， 然 后 在 第 55 行 代码 通过 options 集合 的 add() 方 法 将 Option 对 象 添加 进 下 拉 列 表 框 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.13 所 示 。 


JavaScript 全 程 实例 X | + 一 JavaScript 全 程 实例 X | 十 


QC © localhost e Y œŒ © localhost 
动态 添加 下 拉 列 表 框 选项 动态 添加 下 拉 列 表 框 选项 
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图 7.13 JavaScript 实现 动态 添加 下 拉 列 表 框 选项 
如 图 7.13 中 箭头 所 示 ， 通 过 “添加 颜色 ”按钮 成 功 将 颜色 (blue) 添加 进 下 拉 列 表 框 中 。 
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7.13 动态 删除 下 拉 列 表 框 选项 


本 节 接 着 前 文 的 内 容 ， 继 续 介 绍 如 何 动 态 删除 下 拉 列 表 框 的 选项 。 在 HTML DOM 对 象 中 ， 
通过 调用 下 拉 列 表 框 options 集合 的 remove(selectedIndex) 方 法 ,就 可 以 为 Select 对 象 删 除 一 个 选项 。 
通过 将 options 集合 的 长 度 (length) 属性 设置 为 零 ， 就 可 以 将 Select 对 象 的 全 部 选项 进行 删除 。 下 
面 看 一 个 通过 JavaScript 实现 动态 删除 下 拉 列 表 框 选项 的 代码 实例 。 


【代码 7-14] ( 详 见 源 代 码 目录 ch07-js-select-remove-option.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 «!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 动 态 删除 下 拉 列 表 框 选项 </nav> 
11 «/header» 

12 «!-- 添加 文档 主体 内 容 --> 


13 «div id-"id-div-center"» 


14 «table» 

15 CLE 

16 <th> 设 置 颜色 : &nbsp; &nbsp; «/th» 

17 «ta» 

18 «1-- 定义 下 拉 列 表 框 --> 

19 <select name="selSetColor" id="idSelSetColor"> 

20 <option> 请 选择 . . .</option> 

21 <option value-"red"»5Red«/option» 

22 «option value-"yellow"»Yellow«/option» 

23 <option value-"green"»Green«/option» 

24 «/select»&nbsp; &nbsp; 

25 «/td» 

26 «ftr 

"A «tr» 

28 <td> 删 除 选 项 : &nbsp; &nbsp; </td> 

29 «input type="button" id="id-remove-color" value=" 删 除 颜 色 " 
onclick="removeColor ()"/> 

30 </tr> 


cal «tr» 


32 
23 


34 
aS 
36 
Ly 
38 
393 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
Sl 
52 
03 
54 
39 
56 
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<td> 全 部 删除 : &nbsp; &nbsp; </td> 
«input type="button" id-"id-remove-all-color" value=" 全 部 删除 " 
onclick="removeAllColors()"/> 
/Er 
</table> 
o e kir 
</body> 
<script type="text/javascript"> 
/** 
* remove option color 
* Qparam thisid 
7 
function removeColor(thisid) { 
var idSel - document.getElementById('idSelSetColor'); 
idSel.options.remove (idSel.selectedIndex); 
} 
/** 
* remove option colors 
* Qparam thisid 
e i 
function removeAllColors(thisid) ( 
var idSel - document.getElementById('idSelSetColor'); 
idSel.options.length = 0; 
} 
«/script» 
«/html» 


关于 【代码 7-14】 的 说 明 : 


第 19 ~ 24 行 代码 通过 <select id="idSelSetColor"> 标 签 元 素 定 义 了 一 个 下 拉 列 表 框 ， 并 初始 化 
了 一 组 颜色 选项 ， 用 于 实现 “动态 删除 下 拉 列 表 框 选项 ”的 操作 。 

第 43 ~ 46 行 代 码 定义 的 事件 处 理 方法 用 于 动态 删除 下 拉 列 表 框 中 的 选项 。 其 中 ， 在 第 45 行 
代码 中 ， 先 通过 selectedIndex 属性 获取 当前 选中 的 下 拉 列 表 框 选项 ， 再 通过 remove() 方 法 删 
除 该 选中 项 。 

第 51-54 行 代码 定义 的 事件 处 理 方法 用 于 动态 删除 下 拉 列 表 框 中 的 全 部 选项 。 其 中 ， 在 第 
53 行 代 码 中 ， 通 过 将 options 集合 的 length 属性 设置 为 0 实现 了 删除 全 部 选项 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 7.14 所 示 。 
如 图 7.14 中 箭头 和 标注 所 示 ， 我 们 分 别 测试 了 删除 颜色 〈Yellow) 选项 和 删除 全 部 颜色 选项 


的 操作 。 
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E] JavaScript 全 程 实 例 Ed JavaScript 全 程 实例 X | 十 


Q © localhost ev» Q © localhost eov» 


动态 删除 下 拉 列 表 框 选项 动态 删除 下 拉 列 表 框 选项 


全 部 删除 后 的 效果 


删除 选项 。 | BUSES value | | 


| | 


删除 颜色 (Yellow) 后 的 效果 


图 7.14 JavaScript 实现 动态 删除 下 拉 列 表 框 选项 
7.14 二 级 联动 下 拉 列 表 框 


Æ HTML 网 页 设计 中 ， 二 级 联动 下 拉 列 表 框 是 一 种 比较 常用 的 控件 。 所 请 二 级 联动 下 拉 列 表 
NE, 就 是 指 两 个 存在 从 属 关 系 的 下 拉 列 表 框 。 从 属 关 系 也 可 以 称 为 上 下 级 关系 。 在 选择 上 一 级 下 拉 
列表 框 的 选项 时 , 下 一 级 下 拉 列 表 框 的 选项 会 随 之 进行 切换 。 下面 介 绍 一 个 通过 JavaScript 实现 “大 
洲 -国家 ”二 级 联动 下 拉 列 表 框 的 代码 实例 。 


【代码 7-15] ( 详 见 源 代码 目录 ch07-js-select-2-evel.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 


«1-- 添加 文档 头 部 内 容 --» 


«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 


<nav> 二 级 联动 下 拉 列 表 框 </nav> 


Ti 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
23 
26 
21 
28 
29 
30 
at 
32 
43 
34 
23 
36 
37 
38 
33 
40 
41 
42 
43 
== 
45 
46 


47 
48 
49 
50 
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</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
«form name-"form2sel"» 
KY: 
<select name-"continent" onchange="sel country ()"> 
<option value="0"> 选 择 大 洲 . . .</option> 
«option value=" 亚 洲 "> 亚洲 </option> 
«option value=" 欧 洲 "> 欧洲 </option> 
«option value=" 美 洲 "> 美 洲 </option> 
«/select» 
国家 : 
«select name-"country"» 
«option value="0"> 选 择 国家 . . .</option> 
</select> 
«/form» 
«/div» 
</body> 
<script type="text/javascript"> 
var country = [ 
["ippin, ae a 
IRE", "AE", "法 国 "] ， 
VRHE", "Ei", "阿根廷 "] 
]; 
function sel country() { 
// TODO: 获得 大 洲 下 拉 选 择 框 对 象 
var selContinent = document.form2sel.continent; 
// TODO: 获得 国家 下 拉 选 择 框 对 象 
Var selCountry = document.form2sel.country; 
// TODO: 获得 大 洲 所 对 应 的 国家 数组 
var arrContinentCountry = country[selContinent.selectedIndex - 1]; 
// TODO: 清空 国家 下 拉 列 表 框 , 仅 保 留 第 一 个 选项 
selCountry.length = 1; 
// TODO: 将 国家 数组 中 的 值 填充 到 国家 下 拉 列 表 框 中 
for (var i = 0; i < arrContinentCountry.length; i++) ( 
selCountry[i + 1] = new Option(arrContinentCountry[i], 


arrContinentCountry[i]l); 


} 
</script> 
«/html» 
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关于 【代码 7-15】 的 说 明 : 


第 16~ 21 行 代码 通过 <select name="continent" 人 > 标签 元 素 定 义 了 第 一 级 “大 洲 ” 下 拉 列 表 框 ， 

初始 化 了 一 组 “大 洲 ” 的 选项 ， 并 声明 了 onchange 事件 处 理 方法 (sel country() )， 用 于 实现 
“二 级 联动 下 拉 列 表 框 ”中 的 第 一 级 下 拉 列 表 框 。 

第 23 ~25 行 代码 通过 <select name="country"> 标 签 元 素 定义 了 第 二 级 “国家 ”下 拉 列 表 框 ， 

仅仅 初始 化 了 一 个 “选择 国家 ”选项 ， 用 于 实现 “二 级 联动 下 拉 列 表 框 ”中 的 第 二 级 下 拉 列 

表 框 。 

第 30~ 34 行 代 码 声明 并 初始 化 了 一 个 二 维 数组 ( country )， 定 义 了 “大 洲 ” 下 所 对 应 的 “ 国 

家 ”数组 。 

$ 35-48 行 代码 是 事件 处 理 方法 (sel country) ) 的 实现 过 程 。 首 先 ， 第 41 行 代码 根据 第 一 

级 “大 洲 ” 下 拉 列 表 框 (<select name="continent"> ) 的 selectedindex 属性 值 ， 获 取 了 “大 洲 ” 

所 对 应 的 “国家 ”数组 ; 然后 ， 第 45~ 47 行 通过 for 循环 语句 将 获取 的 “国家 ”数组 填充 进 

第 二 级 “国家 ”下 拉 列 表 框 (<selectname="country"> )， 从 而 实现 了 “大 洲 - 国 家 ”二 级 联动 

下 拉 列 表 框 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 7.15 所 示 。 


JavaScript X | 十 一 口 JavaScript X | 十 一 


Q © localhost e» G © localhost 


二 级 联动 下 拉 列 表 框 二 级 联动 下 拉 列 表 框 


大 洲 国家 : [选择 国家 .… |~ | 


日 本 


JavaScript X | 十 Javascript X | 十 


CQ! © localhost LL œŒ © localhost 


二 级 联动 下 拉 列 表 杠 二 级 联动 下 拉 列 表 框 


大 洲 | 欧洲 ~ 


图 7.15 JavaScript 实现 二 级 联动 下 拉 列 表 框 
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7.15 三 级 联动 下 拉 列 表 框 


在 本 节 中 ， 我们 将 在 二 级 联动 下 拉 列 表 框 的 基础 上 进一步 介绍 如 何 实 现 三 级 联动 下 拉 列 表 框 。 
下 面 看 一 个 通过 JavaScript 实现 三 级 联动 下 拉 列 表 框 的 代码 实例 。 


【代码 7-16】( 详 见 源 代码 目录 ch07-js-select-3Jevel.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实 例 </tit1le> 
06 </head> 

07 <body> 


08 «!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 三 级 联动 下 拉 列 表 框 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 <div id="id-div-center"> 


14 «form name-"form3sel"» 

15 X : 

16 «select name-"continent" onchange-"sel country()"» 
T3 «option value="0"> 选 择 大 洲 . . .</option> 

18 «option value=" 亚 洲 "> 亚洲 </option> 

19 <option value=" 欧 洲 "> 欧洲 </option> 

20 «option value=" 美 洲 "> 美洲 </option> 

21 </select> 

22 国家 : 

23 «select name-"country" onchange-"sel city()"» 
24 «option value="0"> 选 择 国家 . . .</option> 

25 «/select» 

26 城市 : 

21 <select name="city"> 

28 <option value="0"> 选 择 城市 . . .</option> 

29 «/select» 

30 «/form» 

31 «/div» 


32 </body> 
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33 «script type-"text/javascript"» 


34 
35 
36 
37 
38 
39 
40 


41 


42 


43 
44 
45 
46 
47 
48 
49 
50 
p 
22 
23 
54 
2 
56 
ey 
58 
39 


60 
61 
62 
63 
64 
65 
66 
67 
68 
69 


var country = [ 


]; 


["rRE]", "Hk", "韩国 "] ， 
"RN", "德国 "， "法 国 "] : 
[" 美 国 "， "巴西 "， "阿根廷 "] 


var city = [ 


]; 


[ [" 北 京 "， "H", "广州 "] ， [" 东 京 "， "XD, "名 古 屋 "]， [" 首 尔 "， "仁川 "， 


"济州 "] ] ， 


[ [" 伦 敦 "， "曼彻斯特 "， "利物浦 "] ， [" 柏 林 "， "慕尼黑 "， ”法兰克 福 "] ， | a 


"BAR", "摩纳哥 "] iE 


[ [" 华 盛 顿 "， "ZZ", "洛杉矶 "] ， [" 里 约 热 内 卢 "， "圣保罗 "， "巴西 利 亚 "]， 
[" 布 宜 诡 斯 艾 利 斯 "，" 萨 尔 多 瓦 "， " 罗 了 萨 里 奥 "] ] 


function sel country() { 


) 


// TODO: 获得 大 洲 下 拉 选 择 框 对 象 

Var selContinent = document.form3sel.continent; 

// TODO: 获得 国家 下 拉 选 择 框 对 象 

Var selCountry = document.form3sel.country; 

// TODO: 获得 城市 下 拉 选 择 框 对 象 

Var selCity = document.form3sel.city; 

// TODO: 获得 大 洲 所 对 应 的 国家 数组 

Var arrContinentCountry = country[selContinent.selectedIndex - 1]; 

// TODO: 清空 国家 下 拉 列 表 框 , 仅 保 留 第 一 个 选项 

selCountry.length = 1; 

// TODO: 清空 城市 下 拉 列 表 框 , 仅 保 留 第 一 个 选项 

selCity.length = 1; 

// TODO: 将 国家 数组 中 的 值 填充 到 国家 下 拉 列 表 框 中 

for (var i = 0; i < arrContinentCountry.length; itt} ( 
selCountry[i + 1] = new Option(arrContinentCountry[i], 
arrContinentCountry[i]); 


function sel city() { 


// TODO: 获得 大 洲 下拉 选 择 框 对 象 

var selContinent = document.form3sel.continent; 
// TODO: 获得 国家 下 拉 选 择 框 对 象 

var selCountry = document.form3sel.country; 

// TODO: 获得 城市 下 拉 选 择 框 对 象 

Var selCity = document.form3sel.city; 


// TODO: 获得 大 洲 所 对 应 的 国家 数组 
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Var arrCountryCity = city[selContinent.selectedIndex-1] 
[selCountry.selectedIndex-1]; 
// TODO: 清空 国家 下 拉 列 表 框 , 仅 保 留 第 一 个 选项 
selCity.length = 1; 
// TODO: 将 国家 数组 中 的 值 填充 到 国家 下 拉 列 表 框 中 
for (var i = 0; i < arrCountryCity.length; i-*-*) ( 
selCity[i + 1] = new Option(arrCountryCity[i], 


arrCountryCity[i]); 


78 «/script» 
79 «/html» 


关于 【代码 7-16】 的 说 明 : 


第 16~ 21 行 代 码 通 过 <select name="continent"> 标 签 元 素 定义 了 第 一 级 “大 洲 ” 下 拉 列 表 框 ， 
初始 化 了 一 组 “大 洲 ” 的 选项 ， 并 声明 了 onchange 事件 处 理 方法 ( sel country() )， 用 于 实现 
“三 级 联动 下 拉 列 表 框 ”中 的 第 一 级 下 拉 列 表 框 。 
$ 23-25 行 代码 通过 <select name="country"> 标 签 元 素 定 义 了 第 二 级 “国家 ”下 拉 列 表 框 ， 
仅仅 初始 化 了 一 个 “选择 国家 ”选项 ， 并 声明 了 onchange 事件 处 理 方 法 ( sel_city() )， 用 于 
实现 “三 级 联动 下 拉 列 表 框 ”中 的 第 二 级 下 拉 列 表 框 。 
第 27 ~ 29 行 代码 通过 <select name="city"> 标 签 元 素 定义 了 第 三 级 “城市 ”下 拉 列 表 框 ,仅仅 
初始 化 了 一 个 “选择 城市 ”选项 ， 用 于 实现 “三 级 联动 下 拉 列 表 框 ”中 的 第 三 级 下 拉 列 表 框 。 
第 34 ~ 38 行 代码 声明 并 初始 化 了 一 个 二 维 数 组 (country), 定义 “大 洲 ” 下 所 对 应 的 “国家 ” 
数组 。 
第 39 ~ 43 行 代码 声明 并 初始 化 了 一 个 三 维 数组 (city )， 定 义 “ 国 家 ”下 所 对 应 的 “城市 ”数组 。 
第 44~ 61 行 代码 是 事件 处 理 方法 (sel country) 的 实现 过 程 。 首 先 ， 第 52 行 代码 根据 第 一 
级 “大 洲 ” 下 拉 列 表 框 (<select name="continent"> ) 的 selectedIndex 属性 值 获取 了 “大 洲 ” 
所 对 应 “国家 ”的 数组 ; 然后 ， 第 58 ~ 60 行 通过 for 循环 语句 将 获取 的 “国家 ”数组 填充 进 
第 二 级 “国家 ”下 拉 列 表 框 (<select name-"country"» )， 从 而 实现 了 三 级 联动 下 拉 列 表 框 中 
的 “大 洲 - 国 家 ”二 级 联动 功能 。 
第 62~ 77 行 代码 是 事件 处 理 方法 (sel city0) 的 实现 过 程 。 首 先 ， 第 70 行 代码 根据 第 一 级 
“大 洲 ” 下 拉 列 表 框 (<select name="continent"> ) 的 selectedIndex 属性 值 以 及 第 二 级 “国家 ” 
下 拉 列 表 框 ( <select name="country"> ) 的 selectedIndex 属性 值 ， 获 取 了 “大 洲 ” 所 对 应 “ 国 
家 ”以 及 “国家 ”所 对 应 “城市 ”的 数组 ; 然后 , 第 74 ~76 行 通过 for 循环 语句 将 获取 的 “ 城 
市 ”数组 填充 进 第 三 级 “城市 ”下 拉 列 表 框 (<select name="city"> )， 从 而 实现 了 三 级 联动 下 
拉 列 表 框 中 的 “国家 -城市 ”二 级 联动 功能 。 


FAEH Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 分 别 如 图 7.16、 图 7.17 和 图 7.18 


所 示 。 
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JavaScript 全 程 实例 


# Q |© localhost63342/js-tota 


三 级 联动 下 拉 列 表 框 


大 洲 : | 亚洲 v] 国家 | 中 国 ” ~| 城市 


三 级 联动 下 拉 列 表 框 


大 洲 : | 美洲。 v] 国家 : | 美国 。 “| ”城市 


图 7.18 JavaScript 实现 三 级 联动 下 拉 列 表 框 (三 ) 
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7.16 可 输入 的 下 拉 列 表 框 


在 HTML DOM 规范 标准 中 ， 下 拉 列 表 框 <selec 人 > 控件 是 仅 可 以 选择 ， 但 是 不 可 以 输入 的 。 于 
是 ， 如 何 通 过 扩展 标准 下 拉 列 表 框 <select> 的 功能 ， 让 其 既 可 以 支持 用 户 下 拉 选 择 ， 也 可 以 支持 用 
万 人 工 输入 ， 束 成 为 设计 人 员 展 现 智 莫 的 舞台 了 。 

里 然 目 前 业内 已 经 开发 出 了 多 球 JavaScript 框 染 或 插件 来 实现 这 种 可 输入 的 下 拉 列 表 框 了 , 但 
是 这 里 还 是 想 介绍 一 种 通过 最 基础 的 JavaScript + CSS 代码 方式 来 实现 的 可 输入 的 下 拉 列 表 框 。 这 
种 方式 的 设计 思路 很 简单 , 先 通 过 将 一 个 文本 框 覆 凋 在 一 个 下 拉 列 表 框 上 ,再 将 用 户 选 择 的 下 拉 列 
表 框 选项 填充 到 文本 框 中 即 可 。 

下 面 介绍 一 个 通过 JavaScript 实现 可 输入 的 下 拉 列 表 框 的 代码 实例 。 


【代码 7-17】( 详 见 源 代码 目录 ch07-js-input-select.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<style type="text/css"> 
div#id-div-center { 
position: relative; 
width: 320px; 
height: auto; 
border: Opx solid black; 
margin: 32px auto; 
padding: 2px; 
} 
div#id-div-center span { 
overflow: hidden; 
margin-left: 100px; 
width: 18px; 
} 
div#id-div-center select ( 
width: 128px; 
margin-left: -100px; 
} 
div#id-div-center input { 
position: absolute; 
width: 105px; 
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height: 14px; 
left: 98px; 
} 
«/style» 
«body» 
<!-- 添加 文档 主体 内 容 --> 
«header» 


<nav> 可 输入 的 下 拉 列 表 框 </nav> 


</header> 
<!-- 添加 文档 主体 内 容 --> 


«div id-"id-div-center" style=""> 


«span style=""> 
«select id-"id-sel" onchange-"sel input (this.id);"» 


«option value-"html"»5HTML«/option» 
«option value-"js"»JavaScript«/option» 
<option value-"css"»CSS«/option» 


«/select» 
</span> 
<input id="id-input" style=""> 
</div> 
</body> 
<script type="text/javascript"> 


function sel_input (thisid) { 


var sel = document.getElementById (thisid); 
var input = document.getElementById ("id-input"); 


sel.options[sel.selectedIndex].text; 


input.value - 
} 
</script> 
</html> 


关于 【代码 7-17】 的 说 明 : 
第 38-47 行 代码 通 过 <div> 标 签 元 素 定义 了 一 个 顶层 容器 (CSS 样式 定义 见 第 08 ~ 15 行 代 
码 )， 用 于 包含 下 拉 列 表 框 和 文本 框 。 
> 第 39~45 行 代码 通过 <span> 标 签 元 素 定义 了 一 个 二 级 容器 (CSS 样式 定义 见 第 16 ~ 20 
行 代码 ),， 用 于 包含 下 拉 列 表 框 。 Hop. 第 40-44 行 代 码 通 过 <select id="id-sel"> 标 签 元 素 
定义 了 “可 输入 的 下 拉 列 表 框 ”中 的 下 拉 列 表 框 部 分 ， 并 添加 了 onchange 事件 处 理 方法 


(sel input() ). 
> 第 46 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 实现 “可 输入 的 下 拉 列 表 框 ” 


中 的 可 输入 部 分 。 
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e 第 50~54 行 代码 是 事件 处 理 方法 (sel input() ) 的 实现 过 程 。 首 先 ， 在 第 53 行 代 码 中 ， 先 获 
取 用 户 选择 的 下 拉 列 表 框 选项 ， 再 将 选项 文本 填充 进 文本 框 , 实现 了 “可 输入 的 下 拉 列 表 框 ” 
中 的 用 户 选择 功能 。 其次, 第 46 行 代码 定义 的 文本 框 自身 就 有 具有 输入 功能 。 这 两 项 功能 结合 
在 一 起 ， 就 实现 了 “可 输入 的 下 拉 列 表 框 ”功能 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 分 别 如 图 7.19 和 图 7.20 所 示 。 
如 图 7.20 中 第 头 所 示 , 这 里 演示 了 可 输入 的 下 拉 列 表 框 中 的 用 户 输入 (人 工 输入 的 文本 为 “可 
输入 ”) 功能 。 


Javascript X | 十 一 口 JavaScript£ X | 十 一 口 


G © localhost e» = G © localhost 


可 输入 的 下 拉 列 表 框 可 输入 的 下 拉 列 表 框 


JavaScript | v | 《可 输入 》 hd 


HTML HTML 


JavaScript JavaScript 


CSS CSS 


7.19 JavaScript 实现 可 输入 的 下 拉 列 表 框 图 7.20 JavaScript 实现 可 输入 的 下 拉 列 表 框 
(选择 功能 ) (输入 功能 ) 


第 8 章 日 期 和 时 间 特 效 


本 章 介 绍 如 何 通 过 JavaScript 来 实现 日 期 和 时 间 的 各 种 特效 ， 通 过 这 些 特效 来 丰富 HTML. 页 
面 的 设计 手段 和 展示 效果 。 


8.1 日 期 和 时 间 概 述 


日 期 和 时 间 是 HTML 页 面 中 不 太 显眼 ， 但 是 会 经 第 使 用 到 的 元 素 。 其 实 ， 日 期 和 时 间 在 
JavaScript 脚本 语言 开发 中 是 属于 同一 个 概念 的 。 在 JavaScript 对 象 中 ， 专 门 为 日 期 和 时 间 定 义 了 
一 个 Date 对 象 ， 该 对 象 用 来 处 理 日 期 和 时 间 的 编程 。 

XT Date 对 象 的 语法 格式 如 下 : 


【代码 8-1] 


/** Date 对 象 定义 */ 


Var myDate-new Date(); 


另外 ， 默 认 情 况 下 Date 对 象 会 目 动 把 当前 日 期 和 时 间 定 义 为 初始 化 值 。 

通过 JavaScript Date 对 象 可 以 为 日 期 和 时 间 实 现 多 种 页 面 特效 ， 比 如 标题 栏 日 期 、 根 据 时 间 段 
动态 显示 标题 、 倒 计时 效果 、 时 钟 特 效 、 日 历 特 效 、 定 时 器 应 用 ， 等 等 。 本 章 将 为 读者 介绍 多 种 日 
期 和 时 间 特 效 的 代码 实例 。 


8.2 ”在 标题 栏 显示 当前 日 期 


HTML 页 面 的 标题 栏 一 般 用 来 显示 文档 标题 ， 不 过 也 有 设计 人 员 会 将 日 期 和 时 间 显 示 在 标题 
栏 中 。 其 实 ， 在 标题 栏 显示 当前 日 期 的 操作 非常 简单 ， 只 需要 将 日 期 和 时 间 重 新 设 定 给 Document 
对 象 的 标题 “title” 属 性 就 可 以 了 。 下 面 介绍 一 个 通过 JavaScript 实现 在 标题 栏 显 示 当 前 日 期 的 代 
码 实例 。 


【代码 8-2】( 详 见 源 代码 目录 ch08-js-date-title.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 
03 «head» 
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04 <!-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 

08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 <nav> 在 标题 栏 显示 当前 日 期 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 </body> 

14 <script type="text/javascript"> 


15 window.onload = function () { 

16 var date - new Date(); 

17 document.title = date.toString(); 
18 ) 

19 </script> 

20 «/html» 


关于 【代码 8-2】 的 说 明 : 


e 第 16 行 代码 通过 Date 对 象 定义 了 一 个 日 期 和 时 间 变 量 ( date ). 
e 第 17 行 代码 通过 Document *J $4 title 属性 ， 将 当前 时 间 (date) 添加 在 标题 栏 (title 对 象 F. 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.1 所 示 。 


在 标题 栏 显示 当前 日 期 


图 8.1 JavaScript 实现 在 标题 栏 显 示 当 前 日 期 
如 图 8.1 第 头 所 示 ， 页 和 面 标题 栏 中 成 功 显 示 了 通过 JavaScript 脚本 语言 获取 的 当前 日 期 。 


8.3 ”根据 时 间 动 态 显示 标题 欢迎 词 


在 8.2 节 中 ， 我 们 介绍 了 “在 标题 栏 显示 当前 日 期 ”的 JavaScript 语言 代码 实现 。 本 节 将 在 前 
一 节 的 基础 上 继续 介绍 “根据 时 间 动态 显示 标题 欢迎 词 ” 的 方法 。 下 面 看 一 个 具体 的 JavaScript 代 
码 实例 。 


152 | Javascript+Vue+React 全 程 实例 


【代码 8-3】( 详 见 源 代码 目录 ch08-js-date-dyn-title.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 «!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 <nav> 根 据 时 间 动 态 显 示 标 题 欢迎 词 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 «/body» 

14 «script type-"text/javascript"» 


15 window.onload = function () { 

16 var date - new Date(); 

17 var hour = date.getHours(); 

18 if ((hour >= 0) && (hour < 6)}) 1 

19 document.title = "凌晨 好 !"; 

20 ) else if ((hour >= 6) && (hour < 8)) ( 
21 document.title = "早晨 好 !"， 

ze ) else if ((hour >= 8) && (hour < 12)) { 
23 document.title = "上 午 好 !"; 

24 ) else if ((hour >= 12) && (hour < 14)) ( 
25 document.title = "中 午 好 !"; 

26 ) else if ((hour >= 14) && (hour < 18)) ( 
27 document.title = "下 午 好 !"; 

28 ) else if ((hour >= 18) && (hour < 24)) { 
29 document.title = "晚上 好 !"; 

30 是 = := 大 | 

Ji document.title = date.toString(); 

2 } 

24 } 

34 «/script» 

35 «/html» 


关于 【代码 8-3】 的 说 明 : 

e 在 第 17 行 代码 中 先 通过 使 用 Date 对 象 的 getHours() 方 法 获取 了 当前 时 间 的 小 时 字段 (hour )。 

e 在 第 18 ~32 行 代 码 中 通过 让 条 件 选择 语句 判断 小 时 字段 (hour ) 落 在 什么 时 间 段 ， 再 将 所 对 
应 的 “标题 欢迎 词 ” 通 过 Document 对 象 的 title 属性 添加 在 标题 栏 (title) P. 
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下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.2 所 示 。 


Sun Dec 23 2018 11:55:25 GMT*0800 (China Standard Time) 
 — 


Sun Dec 23 2018 12:56:06 GMT+0800 (China Standard Time) 
m 


Sun Dec 23 2018 15:56:30 GMT+0800 (China Standard Time) 
Ld 
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如 图 8.2 中 街头 和 标识 所 示 , 三 个 页 和 面 中 分 别 演示 了 根据 三 个 不 同时 间 段 动态 显示 标题 欢迎 词 
(“上 午 好 ”“ 中 午 好 ”和 “下 午 好 ”》 的 效果 。 


8.4 ”根据 月 份 动态 显示 育 景 


在 8.3 节 中 ,我们 介绍 了 “根据 时 间 动 态 显 示 标 题 欢 迎 词 ”的 JavaScript i zi INSCR. AU 
将 在 前 一 节 的 基础 上 ,继续 介绍 一 种 “根据 月 份 动态 显示 背景 ”的 方法 。 下 和 耐看 一 个 具体 的 JavaScript 
代码 实例 。 


【代码 8-4】( 详 见 源 代码 目录 ch08-js-date-month-bg.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 
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<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 根 据 月 份 改变 背景 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


«div id-"id-div-center" style=""> 


«span» 
«img id-"id-img-bg" src-"" alt=" 正 在 加 载 背 景 . . ."> 


«/span» 
«/div» 
</body> 
<script type="text/javascript"> 
window.onload = function () { 
var bgImage = document.getElementById ("id-img-bg"); 
var date - new Date(); 
var month = date.getMonth() + 1; 
if ((month >= 1) && (month <= 12)) ( 
bglImage.src = "images/calendar-" + month + ".jpg"; 


) 
</script> 
</html> 


关于 【代码 8-4】 的 说 明 : 

e 第 13-17 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 ， 其 中 第 15 行 代码 通过 <img 
id="id-img-bg"> 标 签 元 素 定义 了 一 幅 背 景 图 片 ， 目 标 是 根据 月 份 动态 显 示 不 同 的 背景 图 片 。 

o 第 23 行 代码 通过 使 用 Date 对 象 的 getHours() 方 法 获取 了 当前 时 间 的 月 份 字 段 ,注意 , getHours() 
方法 的 返回 值 范围 为 数值 0~ 11， 因 此 返回 值 要 再 加 1 才 会 得 到 正确 的 月 份 (month ). 

e 第 25 行 代码 通过 将 月 份 (month) 数值 与 背景 图 片 文件 名 连接 在 一 起 ， 实 现 “ 根 据 月 份 动态 
ETHER” HAR. 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.3 所 示 。 
如 图 8.3 中 第 关 所 示 , 两 个 页 面 中 分 别 演示 根据 月 份 动态 显示 背景 (“2018 年 12 月 ”和 “2019 
年 1 月 ”) 的 效果 。 
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Javascipt X | 十 一 口 X JavaScript: X | d 一 a X 
œŒ © localhost % | Z GC © localhos: -»|z 
根据 月 份 改变 背景 根据 月 份 改变 背景 


2018 年 12 月 ^ 2019 年 1 月 


图 8.3 JavaScript 实现 根据 月 份 动态 显示 背景 


8.5 格式 化 日 期 的 方法 


在 JavaScript 脚本 语言 中 ， 直 接 通 过 Date 对 象 获 取 的 日 期 和 时 间 是 格林 威 治标 准时 间 格 式 ， 
虽然 这 个 格式 看 上 去 很 酷 很 专业 ， 但 是 对 于 普通 用 户 的 可 读 性 并 不 是 很 好 。 其 实 ， 通 过 Date 对 象 
提供 的 一 系列 方法 再 配合 人 工 编程 方式 ， 完 全 可 以 将 获取 的 日 期 和 时 间 对 象 格 式 化 成 我 们 习惯 的 、 
可 读 性 很 好 的 格式 。 下 面 介 绍 一 种 简单 、 第 用 的 日 期 格式 化 (YYYY-MM-DD hh:mm:ss) 操作 的 
JavaScript 代码 实例 。 


【代码 8-5】( 详 见 源 代码 目录 ch08-js-date-format.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --» 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript 日 期 和 时 间 特 效 - 格式 化 日 期 的 方法 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 

13 «div id-"id-div-center" style=""> 

14 Today: 

15 «span id-"id-span-today"»«/span» 
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16 格式 化 时 间 : 

FI «span id-"id-span-format-date"»«/span» 

18 «/div» 

19 </body> 

20 «script type-"text/javascript"» 

2l window.onload = function () { 

22 var date = new Date(); 

23 var today = document.getElementById ("id-span-today"); 

24 var formatToday = document.getElementById("id-span-format-date"); 

25 today.innerText - date.toString(); 

26 formatToday.innerText - formatDate (date); 

2 

28 function formatDate (d) { 

29 var curYear - d.getFullYear(); 

30 var curMonth = d.getMonth() + 1; 

41 if (curMonth >= 1 && curMonth <= 9) { 

32 curMonth = "0" + curMonth; 

33 } 

34 var curDate = d.getDate(); 

3 if (curDate >= 0 && curDate <= 9) ( 

36 curDate = "0" + curDate; 

3 + 

38 Var curHour = d.getHours(); 

39 if (curHour >= 0 && curHour <= 9) { 

40 curHour — "U" rir 

41 ) 

42 var curMinutes = d.getMinutes(); 

43 if (curMinutes >= 0 && curMinutes <= 9) { 

44 curMinutes = "0" + curMinutes; 

45 | 

46 Var curSecond = d.getSeconds(); 

47 if (curSecond >= 0 && curSecond <= 9) { 

48 curSecond = "0" + curSecond; 

49 ] 

50 var arrWeek = [" 星 期 日 "，" 星 期 一 "， "星期 二 "， "星期 三 "， "星期 四 "， 
"星期 五 "， ”星期 六”] ; 

SL var curDay = arrWeek[d.getDay()]; 

52 // TODO: return format date 

H3 return curYear t "-" 4 curMonth T "-" 4 curDate -* " " 4 curHour * ";" 
TopurMinUEBS P To Er mn RBOUO"OPpBEDOM Pot 

54 ) 


55 «/script» 
56 «/html» 
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关于 【代码 8-5】 的 说 明 : 

e 第 15 行 和 第 17 行 代码 分 别 通过 <span> 标 签 元 素 定义 了 两 个 行内 容器 ， 分 别 用 于 显示 正常 未 
格式 化 的 日 期 和 格式 化 后 的 日 期 。 

© 第 28~54 行 代码 定义 的 formatDate() 方 法 用 于 实现 对 正常 日 期 的 格式 化 操作 。 其 中 ， 在 第 29 
行 代码 中 通过 getFullYear() 方 法 获取 了 年 份 字段 ， 在 第 30 行 代 码 中 通过 getMonth() 方 法 获取 
了 月 份 字段 (注意 加 1 操作 )， 在 第 34 行 代 码 中 通过 getDate() 方 法 获取 了 日 期 字段 ， 在 第 38 
行 代码 中 通过 getHours() 方 法 获取 了 小 时 字段 ,在 第 42 行 代 码 中 通过 getMinutes() 方 法 获取 了 
分 钟 字 段 ， 在 第 46 行 代码 中 通过 getSeconds() 方 法 获取 了 秒 数字 段 。 另 外 ， 对 于 一 位 数字 的 
日 期 和 时 间 字 段 ， 均 统一 转换 为 了 两 位 数字 ,这 样 的 显示 效果 会 更 美观 。 第 50 行 代 码 定 义 了 
一 个 从 星期 日 到 星期 六 的 数组 (arrWeek )， 并 在 第 51 行 代码 中 通过 getDay() 方 法 获取 当前 日 
期 是 星期 几 。 第 53 行 代码 通过 将 前 面 获取 的 一 系列 关于 日 期 和 时 间 的 信息 , 按照 格式 化 日 期 

(YYYY-MM-DD hh:mm:ss ) 的 方式 连接 到 一 起 ， 并 作为 formatDate0) 方 法 的 返回 值 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 8.4 所 示 。 


JavaScript 全 程 实例 x | 十 - o 


> ^ Q © localhost63342/;: eO] 


JavaScript 日 期 和 时 间 特 效 - 格式 化 日 期 的 方法 


Today: Mon Dec 24 2018 00:08:53 CMT+0800 (China Standard Time) 
格式 化 时 间 : 2018-12-24 00:08:53 星期 一 . 


84 JavaScript 实现 格式 化 日 期 的 方法 


如 图 8.4 中 第 头 所 示 ， 页 和 面 中 分 别 演示 了 标准 格林 尼 治 时 间 以 及 格式 化 (YYYY-MM-DD 
hh:mm:ss) 日 期 和 时 间 的 效果 。 


8.6 判断 今天 是 否 为 节假日 


在 很 多 日 历 应 用 〈App) 中 ， 如 果 今 天 是 节假日 (包括 双休日 和 国家 法 定 节 假日 ) 在 显示 效果 
上 均 会 有 所 区 别 。 其 实 ， 通 过 JavaScript 脚本 语言 可 以 有 效 地 判断 出 双休日 ， 然 后 针对 国家 法 定 市 
假日 设 定 特 殊 的 算法 。 下 面 介 绍 一 个 通过 JavaScript 实现 判断 今天 是 否 为 节假日 的 代码 实例 。 


【代码 8-6】( 详 见 源 代码 目录 ch08-js-date-holiday.html 文件 ) 


01 «!doctype html» 


02 «html lang-"en"» 
03 «head» 
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04 
05 
06 
07 
08 
09 
10 
Td 
12 
13 
14 
15 
16 
17 
18 
13 
20 
Z1 
22 
23 
24 
29 
26 
21 


28 
29 
30 
chl 
32 
33 
34 
35 
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45 
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«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 判 断 今天 是 否 为 节假日 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style-""» 
今天 是 :<span id-"id-span-date"»«/span» 
今天 是 :<span id="id-span-hw"></span> 
«/div» 
«/body» 
«script type-"text/javascript"» 
window.onload = function () { 
var today = document.getElementById ("id-span-date"); 
var holiday weekend = document.getElementById ("id-span-hw"); 
var date - new Date(); 
today.innerText - curDate (date); 
holiday weekend.innerText - getHolidayWeekend (date); 
}; 
function curDate(d) { 
var arrWeek = [" 星 期 日 "，" 星 期 一 "，" 星 期 二 "， "星期 三 "， "EWW", 
"ENmn'", "EN8pIA"]; 
var curYear - d.getFullYear(); 
var curMonth = d.getMonth() + 1; 
var curDate - d.getDate(); 


var curDay = arrWeek[d.getDay()]; 


rebLurn curYear t "—-" t curMonth 1 "-" T cpnrDate 1 " " - curDay t "."; 


} 
function getHolidayWeekend(d) ( 
var vHolidayWeekend; 
var hMonth = d.getMonth() + 1; 
var hDate - d.getDate(); 
var hDay = d.getDay(); 
if (hDate == 1) { 
if (hMonth == 1) { 
vHolidayWeekend = "新 年 元 旦 "; 
) else if (hMonth == 5) { 
vHolidayWeekend = "五 一 劳动 节 "; 
) else if (hMonth == 10) { 
vHolidayWeekend = "十 一 国庆 节 "; 
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} else { 
} 
else if ((hMonth 3) && (hDate 
vHolidayWeekend = "二 八 妇女 节 "; 
else if ((hMonth 4) && (hDate 
vHolidayWeekend = "清明 节 "， 
else if ((hMonth 8) && (hDate 
vHolidayWeekend = "中 秋 节 "; 
else ( 
if(isWeekend(d)) { 
vHolidayWeekend = "周末 (六 日 ) "; 
) else ( 
vHolidayWeekend = "工作 日 "; 


} 
return vHolidayWeekend; 
} 
function isWeekend(d) ( 
var hDay = d.getDay(); 
if ((hDay == 0) || (hDay -- 
return true; 
) else { 


return false; 


) 
«/script» 
«/html» 


关于 【代码 8-6】 的 说 明 : 

e 第 14~ 15 行 代码 通过 <span> 标 签 元 素 定义 了 两 个 行内 容器 , 第 一 个 用 于 显示 当前 日 期 , 第 二 
个 用 于 显示 当前 日 期 是 否 为 节假日 的 判断 结果 。 

o 第 26~33 行 代码 定义 的 curDate() 方 法 用 于 获取 当前 日 期 (格式 为 YYYY-MM-DD Week ). 

e 第 34~62 行 代码 定义 的 getHolidayWeekend() 方 法 用 于 判断 当前 日 期 是 否 为 节假日 ， 这 里 的 
节假日 包括 元 旦 、 五 一 劳动 节 、 十 一 国庆 节 、 三 八 妇 女 节 、 清 明 节 和 中 秋 节 ， 还 包括 正常 的 
周末 ( 周 六 和 周 日 ) 休息 日 。 因 为 类 似 元 旦 或 五 一 劳动 节 这 类 的 节假日 都 是 有 固定 日 期 的 ， 
所 以 在 第 19~54 行 代码 中 通过 判断 当前 日 期 是 否 为 这 些 固定 日 期 来 甄别 是 否 为 凶 假 日 ,而 在 
第 55 ~ 59 行 代 码 中 ， 通 过 调用 isWeekend() 方 法 来 判断 当前 日 期 是 否 为 周末 休息 日 。 

e 第 63~70 行 代码 定义 的 是 isWeekend() 方 法 的 实现 过 程 .其 中 ,第 64 行 代码 通过 调用 getDay() 
方法 获取 了 当前 日 期 是 星期 几 ， 然 后 第 65-69 行 代 码 判 断 是 否 为 周 六 或 周 日 (通过 布尔 值 
返回 )。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 8.5 所 示 。 


160 | Javascript+Vue+React 全 程 实例 


JavaScript £R X | 十 JavaScript £gS- X | 十 


Q' © localhost ee E QQ ®© localhost 
判断 今天 是 否 为 节假日 判断 今天 是 否 为 节假日 


今天 是 : 2019-1-1 星期 二 . 今天 是 : 2019-1-8 星期 二 . 


5x8 GERD) 今天 是 :工作 日 
\ N 


8.5 JavaScript 实现 判断 今天 是 否 为 节假日 


如 图 8.5 中 第 头 所 示 , 两 个 页 和 面 中 分 别 演示 了 新 年 元 旦 (2019 年 1 月 1 日) 和 平时 工作 日 (2019 
年 1 月 8 日 ) 的 效果 。 


8.7 每 秒 刷 新 的 时 间 展 示 效 果 


通过 JavaScript 的 Date 对 象 可 以 获取 详细 的 时 间 参 数 ， 如 果 结 合 使 用 setInterval() EE SGJETT XE 
时 ， 就 可 以 在 页 面 中 模拟 出 每 秒 刷 新 的 时 间 展 示 效 果 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-7】( 详 见 源 代 码 目录 ch08-js-date-timer.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav> 每 秒 刷 新 的 时 间 展 示 效 果 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
每 秒 刷新 的 时 间 展 示 效 果 : 
<span id="id-span-timer"></span> 
«/div» 
</body> 
<script type="text/javascript"> 
window.onload = function () { 


// TODO: 使 用 setInterval 函数 进行 定时 
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21 window.setInterval(function () 

22 // TODO: 得 到 当前 的 时 间 对 象 

23 var date - new Date(); 

24 var str = ''; // TODO: 定义 拼接 的 字符 变量 
25 // TODO: 得 到 小 时 数 

26 str += date.getHours(); 

27 str += ':'; // TODO: 拼接 冒号 

28 // TODO: 得 到 分 钟 数 

29 str += date.getMinutes (); 

30 str IS ':'; // TODO: 拼接 冒号 

31 // TODO: 得 到 秒 数 

32 str += date.getSeconds(); 

33 // TODO: 把 结果 显示 出 来 

34 document.getElementById('id-span-timer').innerHTML = str; 
35 ), 1000);  // TODO: 间隔 为 1 秒 

36 }; 

STELELE 

38 «/html» 


关于 【代码 8-7】 的 说 明 : 

o 第 15 行 代码 通过 <span> 标 签 元 素 定 义 了 一 个 行内 容器 ， 用 于 实现 每 秒 刷新 的 时 间 展 示 效 果 。 

e 第 21~35 行 代码 通过 调用 Window 对 象 的 setInterval() 方 法 进行 定时 ， 时 间 间 隔 定义 为 1 秒 。 
其 中 ， 第 26 行 、 第 29 行 和 第 32 行 代码 分 别 通过 调用 getHours() 方 法 、getMinutes() 方 法 和 
getSeconds() 方 法 获取 了 小 时 、 分 钟 和 秒 数 ， 并 通过 str 变量 连接 为 一 个 时 间 格 式 (hh:mm:ss )。 
借助 于 setImnterval(0) 方 法 设 定 1 秒 定时 ， 因 此 在 页 面 中 实现 每 秒 刷 新 的 时 间 展 示 效 果 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.6 所 示 。 

JavaScript S X | = oc 


œŒ © localhost YV: 


每 秒 刷新 的 时 间 展示 效果 


每 秒 刷 新 的 时 间 展 示 效 果 : 10:59:25 


8.6 JavaScript 实现 每 秒 刷新 的 时 间 展 示 效 果 
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8.8 时 间 计 时 器 


我 们 接着 8.7 节 的 内 容 继续 介绍 , 其 实 通过 使 用 setInterval0 函 数 定时 功能 ， 还 可 以 实现 时 间 计 
时 器 的 功能 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-8】( 详 见 源 代码 目录 ch08-js-date-start-timer.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
I 
12 
13 
14 
15 


16 
T3 
18 
13 
20 
21 
22 
23 
24 
zs 
26 
21 
28 
29 


30 
al 
32 


<!doctype html> 
<html lang="en"> 
<head> 


<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 日 期 和 时 间 特 效 - 时 间 计 时 器 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center" style="" 
时 间 计 时 器 :<span id="id-span-start-timer"></span> 
«button id-"id-btn-start-timer" onclick-"start timer(this.id)"» 
开始 计时 器 </button> 
</div> 
</body> 
<script type="text/javascript"> 
var iHours = 0; // TODO: 定义 小 时 的 整数 变量 
var iMinutes = 0;  // TODO: 定义 分 钟 的 整数 变量 
var iSeconds = 0;  // TODO: 定义 秒 数 的 整数 变量 
var strHours = "00"; // TODO: 定义 小 时 的 字符 变量 
var strMinutes = "00"; // TODO: 定义 分 钟 的 字符 变量 
var strSeconds = "00"; // TODO: 定义 秒 数 的 字符 变量 
var strTimer; 
window.onload = function (ev) { 
// TODO: 定义 计时 器 拼接 的 字符 变量 
strTimer = strHours + ":;" + strMinutes + ":;" + strSeconds; 
document.getElementById('id-span-start-timer'). 
innerHTML - strTimer; 
}; 
function start timer(thisid) { 


// TODO: 使 用 setInterval 函数 进行 定时 
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window.setInterval(function () ( 
iSeconds-**; 
if (iSeconds--60)( 
iSeconds - 
iMinutes-t*; 
if (iMinutes--60)( 
iMinutes = 0; 
iHours-tt; 
} 
) else( 
strSeconds - iSeconds.toString(); 
if(strSeconds.length -- 1) 
strSeconds = "0" + strSeconds; 
strMinutes - iMinutes.toString(); 
if(strMinutes.length -- 1) 
strMinutes = "0" + strMinutes; 
strHours - iHours.toString(); 
if(strHours.length -- 1) 
strHours = "0" + strHours; 
} 
strTimer = strHours + ":;" + strMinutes + ":" + strSeconds; 
document.getElementById('id-span-start-timer'). 
innerHTML - strTimer; 


), 1000);  // TODO: 间隔 为 1 秒 


} 
</script> 
«/html» 


关于 【代码 8-8】 的 说 明 : 

e 第 14 行 代码 通过 <span> 标 签 元 素 定义 了 一 个 行内 容器 ， 用 于 实现 时 间 计 时 器 的 展示 效果 . 

e 第 15 行 代码 通过 <button> 标 签 元 素 定 义 了 一 个 按钮 ， 添 加 了 onclick 事件 处 理 方法 
(start timer() )， 用 户 可 以 单 击 该 按钮 执行 开始 计时 器 的 操作 。 

e 第 31~56 行 代码 是 start timer() 方 法 的 实现 过 程 ， 其 中 第 33 ~ 55 行 代码 通过 调用 Window 对 
$4] setInterval() 方 法 进行 定时 ， 时 间 间 隔 定义 为 1 秒 。 每 次 定时 (1 秒 ) 完 成 后 , 通过 第 19 ~ 
24 行 代码 定义 的 变量 (小 时 、 分 钟 和 秒 数 ) 进行 累加 操作 ， 然 后 在 第 53 行 代 码 中 将 计时 器 
整合 成 字符 串 格 式 保存 在 第 25 行 代码 定义 的 变量 ( strTimer ) 中 ,最 后 通过 第 54 行 代 码 在 页 
面 中 进行 显示 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.7 所 示 。 


如 图 8.7 中 箭头 所 示 ， 左 边 页 面 中 为 时 间 计 时 器 初始 状态 ， 通 过 单 击 “ 开 始 计时 器 ”操作 后 ， 
右边 页 面 中 演示 了 时 间 计 时 器 运行 的 效果 〈00:03:18) 。 
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JavaScript 日 期 和 时 间 特 效 - 时 间 计 时 器 JavaScript 日 期 和 时 间 特 效 - 时 间 计时 器 


时 间 计 时 器 : 00:00:00 时 间 计 时 器 : 00:03:18 


图 8.7 JavaScript 实现 时 间 计 时 器 
8.9 时 间 倒 计时 器 


前 一 小 节 实 现时 间 计 时 器 的 功能 ， 接 着 我 们 逆 辐 思维 来 实现 时 间 倒 计时 器 的 功能 。 下 面 ， 看 
一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-9】( 详 见 源 代码 目录 ch08-js-date-count-down.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 日 期 和 时 间 特 效 - 时 间 倒 计时 器 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
时 间 倒 计时 器 :<span id-"id-span-count-down"»«/span» 
起 始 时 间 : &nbsp; &nbsp;«input type="text" id-"id-input-init-time" 
value="1"> 分 钟 
<button id="id-btn-count-down" onclick="count down (this.id)"> 开 始 倒 计时 
</button> 
</div> 
</body> 


<script type="text/javascript"> 
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Var iHours = 0; // TODO: 定义 小 时 的 整数 变量 
var iMinutes = 0;  // TODO: 定义 分 钟 的 整数 变量 
var iSeconds = 0;  // TODO: 定义 秒 数 的 整数 变量 
var strHours = "00"; // TODO: 定义 小 时 的 字符 变量 
var strMinutes = "00"; // TODO: 定义 分 钟 的 字符 变量 
"00"; // TODO: 定义 秒 数 的 字符 变量 


Var strSeconds 
var strTimer; 
window.onload = function (ev) { 
init time(); 
// TODO: 定义 计时 器 拼接 的 字符 变量 
strTimer = strHours + ";" 4 strMinutes +t TIT 4 strSeconds; 
document.getElementById('id-span-count-down'). 
innerHTML - strTimer; 
); 
function init time() { 
iMinutes = document.getElementById("id-input-init-time").value; 
strMinutes - iMinutes.toString(); 
if (strMinutes.length -- 1) 
strMinutes = "0" 4 strMinutes; 
} 
function count down(thisid) { 
init time(); 
// TODO: 使 用 setInterval 函数 进行 定时 
window.setInterval(function () { 
if (iSeconds == 0) { 
if (iMinutes > 0) ( 
iMinutes--; 
strMinutes - iMinutes.toString(); 
if (strMinutes.length -- 1) 
strMinutes = "0" + strMinutes; 
iSeconds = 60; 
iSeconds--; 
strSeconds = iSeconds.toString(); 
if (strSeconds.length -- 1) 


strSeconds = "0" + strSeconds; 


) else if (iMinutes == 0) { 
strMinutes - "00"; 
) else { 


| 

) else if (iSeconds > 0) { 
iSeconds--; 
strSeconds = iSeconds.toString(); 


if (strSeconds.length -- 1) 
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62 strSeconds = "0" + strSeconds; 

63 1 eisi 

64 } 

65 strTimer = strHours + ":;" + strMinutes + ":" + strSeconds; 


66 document.getElementById('id-span-count-down'). 


innerHTML - strTimer; 
67 ), 1000);  // TODO: 间隔 为 1 秒 
68 | 
69 «/script» 
70 «/html» 


关于 【代码 8-9】 的 说 明 : 

e 第 14 行 代码 通过 <span> 标 签 元 素 定 义 了 一 个 行内 容器 ， 用 于 实现 时 间 倒 计时 器 的 展示 效果 。 

o 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 用 户 定义 时 间 倒 计时 器 的 初始 时 
间 (默认 值 为 1 分 钟 )。 

e 第 16 行 代码 通过 <button> 标 签 元 素 定 义 了 一 个 按钮 ， 添加 了 onclick 事件 处 理 方法 

(count down() )， 用 户 可 以 单 击 该 按钮 执行 开始 倒计时 器 的 操作 。 

第 33~ 38 行 代码 是 init_time() 方 法 的 实现 过 程 ,该 方法 用 于 获取 用 户 输 入 的 倒计时 初始 时 间 。 

e 第 39~68 行 代码 是 count down() 方 法 的 实现 过 程 ， 其 中 第 42 ~ 67 行 代码 通过 调用 Window 
对 象 的 setInterval() 方 法 进行 定时 ， 时 间 间 隔 定 义 为 1 秒 。 每 次 定时 (1 秒 ) 完成 后 ， 通 过 第 
20-25 行 代码 定义 的 变量 (小 时 、 分 钟 和 秒 数 ) 进行 累 减 操作 ， 然 后 在 第 65 行 代码 中 将 计 
时 器 整合 成 字符 串 格式 保存 在 第 26 行 代码 定义 的 变量 (strTimer ) 中 ,最 后 通过 第 66 行 代 码 
在 页 面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.8 和 图 8.9 所 示 。 


JavaScript £S X | 十 JavaScript 全 程 实 ”XX | T 一 


Q © localhost LL | GQ ®© localhost 


JavaScript 日 期 和 时 间 特 效 - 时 间 倒 计时 器 Javascript 日 期 和 时 间 特 效 - 时 间 倒 计时 器 


时 间 倒 计时 器 : 00:01:00 时 间 倒 计时 器 : 00:00:55 


起 始 时 间 : 开始 倒计时 ， 


图 8.8 JavaScript 实现 时 间 倒 计时 器 (一) 


如 图 8.8 中 第 头 所 示 ， 左 边 页 和 面 中 为 时 间 倒 计时 器 初始 状态 (00:01:00〉 ， 通 过 单 击 “开始 倒 
计时 ”按钮 操作 后 ， 右 边 页 面 中 演示 了 时 间 倒 计时 器 运行 的 效果 (00:00:55) 。 
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Q! ®© localhost Zn »》 三 > C | © localhost zn »》 三 


Javascript 日 期 和 时 间 特 效 - 时 间 倒 计时 器 Javascript 日 期 和 时 间 特 效 - 时 间 倒 计时 器 


时 间 倒 计时 器 : 00:01:00 时 间 倒 计时 器 : 00:02:55 
起 始 时 间 : | 3| [oh | 开始 倒计时 起 始 时 间 : | 3 oth 


图 8.99 JavaScript 实现 时 间 倒 计时 器 (二) 


如 图 8.9 中 第 头 所 示 ， 左 边 页 和 面 中 为 时 间 倒 计时 器 初始 状态 ， 用 户 手动 输入 了 起 始 时 间 (3 分 
钟 ), 通过 单 击 “ 开始 倒 计时 按钮 操作 后 , 右边 页 面 中 演示 了 时 间 倒 计时 器 运行 的 效果 (00:02:55 ) 。 


8.10 ”计算 时 间 差 


在 JavaScript 脚本 语言 中 ，Date 对 象 提供 了 一 个 getTime() 方 法 ， 可 以 获取 任 一 时 间 与 1970 年 
1 月 1 日 零点 之 间 的 时 间 差 (毫秒 单位 )。 利 用 getTime() 方 法 就 可 以 很 容易 地 计算 出 任意 两 个 时 间 
节点 之 间 的 时 间 差 。 

下 面 介 绍 一 个 通过 JavaScript 实现 计算 任意 两 个 时 间 节 点 时 间 差 的 代码 实例 。 


【代码 8-10】( 详 见 源 代码 目录 ch08-js-date-cal-interval.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 日 期 和 时 间 特 效 - 计算 时 间 差 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 


«div id-"id-div-center" style-""» 
<labe1> 第 一 个 时 间 (2019-01-08 10:10:10):«/1abel» 
<input type="text" name="timel" id="id-time-1"/> 
<labe1> 第 二 个 时 间 (2019-01-10 22:22:22) :</label> 


<input type="text" name="time2" id="id-time-2"/> 
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18 «input type="button" value=" 计 算 " onclick-"calTimeInterval();"/» 
19 <span id="id-time-interval"></span> 

20 «/div» 

21 </body> 

22 <script type-"text/javascript"» 

23 // TODO: calculate time interval 

24 function calTimeInterval() { 

25 var timel - document.getElementById('id-time-1').value; 
26 var time2 - document.getElementById('id-time-2').value; 
21 var tl = parseTime (timel); 

28 var t2 - parseTime (time2); 

29 var span - tl.getTime() - t2.getTime(); 

30 Span = Math.abs(span / 1000); 

3d document.getElementById("id-time-interval"). innerText - 


' 两 个 时 间 相 差 '+span+' 秒 .'， 


32 } 

33 [Et 

34 * parse time 

323 * (param str 

36 * (ireturns (Date) 

aJ ui i 

38 function parseTime(str) { 

39 var date = str.split(' ')[0]; 
40 var darr - date.split('-'); 
41 var time - str.split(' ')[1]; 
42 var tarr - time.split(':'); 
43 var y = parseInt (darr[0]); 

44 var m = parseInt (darr[1]); 

45 var d = parseInt (darr[2]); 

46 var h = parseInt (tarr[0]); 

47 var mm = parseInt (tarr[1]); 
48 var s = parseInt (tarr[2]); 

49 return new Date(y, m, d, h, m, s); 
50 } 

0 

52 «/html» 


关于 【代码 8-10】 的 说 明 : 

e 第 15 行 和 第 17 行 代 码 通过 <input> 标 签 元 素 定 义 了 两 个 文本 框 ， 用 于 用 户 输入 两 个 时 间 节 点 
( 注意 格式 为 : YYYY-MM-DD hh:mm:ss ), 

e 第 18 行 代码 通过 <inpu 亿 标签 元 素 定 义 了 一 个 按钮 ， 添 加 了 onclick 事件 处 理 方法 
( calTimeInterval() )， 用 户 可 以 单 击 该 按钮 执 计算 时 间 差 的 操作 。 
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o 第 24~32 行 代码 是 calTimelInterval() 方 法 的 实现 过 程 。 其中， 第 27 ~ 28 行 代 码 通 过 调用 自 定 
X Zik (parseTime() ) 来 解析 时 间 节 点 (返回 Date 类 型 ) 第 29 行 代码 通过 调用 getTime() 
方法 获取 这 两 个 时 间 节 点 与 1970 年 1 月 1 日 零点 之 间 的 时 间 差 (毫秒 单位 )。 

e 第 38-50 行 代码 是 parseTime() 方 法 的 实现 过 程 ， 该 方法 负责 将 时 间 节 点 (格式 : 
YYYY-MM-DD hh:mm:ss ) 解析 为 Date 类 型 并 返回 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.10 所 示 。 


Eg JavaScript 全 程 实例 x | 十 3 口 E Javascript 全 程 实例 


^ QC | © localhost63342 e D» o» € -— CQ | © localhost:63342 
JavaScript 日 期 和 时 间 特 效 - 计算 时 间 差 Javascript 日 期 和 时 间 特 效 - 计算 时 间 差 
第 一 个 时 间 (2019-01-08 10:10:10): 第 一 个 时 间 (2019-01-08 10:10:10): 


第 二 个 时 间 (2019-01-10 22:22:22): 第 二 个 时 间 (2019-01-10 22:22:22): 


计算 | 两 个 时 间 相 差 216732 9». 


图 8.10 JavaScript 实现 计算 时 间 差 


如 图 8.10 中 每 头 所 示 ， 左 边 页 面 中 填 入 了 两 个 时 间 节 点 ， 通 过 单 击 “ 计 复 ” 按 钮 后 ， 右 边 页 
面 中 显示 了 两 个 时 间 节 点 的 时 间 差 (216732 £5) 。 


8.11 计算 日 期 间隔 


在 8.10 节 中 ， 我 们 实现 了 计算 任意 两 个 时 间 节 点 之 间 的 时 间 差 功能 。 不 过 这 个 时 间 差 的 计算 
结果 是 以 “ 秒 ” 为 单位 的 ， 可 读 性 不 是 很 好 。 在 本 节 中 ， 我 们 继续 改进 一 下 代码 ， 直 接 计算 出 任意 
两 个 时 间 节 点 之 间 的 日 期 间 隅 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 8-11】( 详 见 源 代码 目录 ch08-js-date-cal-d2d.html 文件 ) 


01 <script type="text/javascript"> 

02 function calDateInterval() { 

03 var timel - document.getElementById('id-time-1').value; 
04 var time2 - document.getElementById('id-time-2').value; 
05 var tl = parseTime (timel); 

06 var t2 = parseTime(time2); 


07 var span - tl.getTime() - t2.getTime(); 
08 span - Math.abs(span / 1000); 
09 var d2d = parseDate (span); 
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10 document.getElementById("id-date-interval").innerText - 


' 两 个 日 期 间隔 : ' + d2d + '， .'，; 


13 } 

12 function parseTime(str) { 

13 var date = str.split(' ')[0]; 

14 var darr = date.split('-'); 

15 var time = str.split(' ')[1]; 

16 var Larr = time.split(':!'); 

17 var y = parseInt (darr[0]); 

18 var m = parseInt (darr[1]); 

19 var d = parseInt (darr[2]); 

20 var h = parseInt (tarr[0]); 

21 var mm = parseInt (tarr[1]); 

22 var s = parseInt(tarr[2]); 

23 return new Date(y, m, d, h, m, s); 
24 } 

23 function parseDate (sec) { 

26 var seconds = sec $ 60; 

27 var minutes = Math.floor (sec / 60); 
28 var hours = Math.floor (minutes / 60); 
29 var days = Math.floor (hours / 24); 
30 var s = seconds; 

ri var m - minutes - hours * 60; 

32 var h = hours - days * 24; 

33 var d = days; 

34 return days + "K " + h + "小 时 " + m + "分钟 " + s + "$"; 
39 } 

36 </script> 


关于 【代码 8-11] 的 说 明 : 


o 【代码 8-11】 主 要 是 在 【代码 8-10】 的 基础 上 修改 而 成 的 ， 关 键 部 分 就 是 增加 了 一 个 自 定 义 
parseDate() 方 法 。 

e 第 25~35 行 代码 是 parseDate() 方 法 的 实现 过 程 ， 该 方法 负责 将 计算 得 出 的 时 间 间 隔 ( 秒 ) 解 
析 为 “xx 天 XX 小 时 xx DAP xx 秒 "的 字符 串 格式 并 返回 。 这 里 主要 是 借助 了 Math 对象 的 floor() 
方法 ， 将 时 间 换 算 后 进行 了 向 下 取 整 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 8.11 所 示 。 
如 图 8.11 中 第 尖 所 示 ， 左 边 页 和 面 中 填 入 了 两 个 时 间 节 点 ， 通 过 单 击 “ 计 算 ” 按 钮 后 ， 右 边 页 
面 中 显示 了 两 个 日 期 的 间隔 (2 天 12 小 时 12 分 钟 12 秒 ) 。 


JavaScript 全 程 实例 


Œ ®© localhost.63342 Zn wo» 


JavaScript 日 期 和 时 间 特 效 - 计算 日 期 间隔 


第 一 个 时 间 (2019-01-08 10:10:10): |2019-01-08 10:10:10 | 
第 二 个 时 间 (2019-01-10 22:22:22); 
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JavaScript 全 程 实例 x | T m o 


G | © localhost:63342 Zr Wo» 


JavaScript 日 期 和 时 间 特 效 - 计算 日 期 间隔 


第 一 个 时 间 (2019-01-08 10:10:10): 
第 二 个 时 间 (2019-01-10 22:22:22): 


| 计算 | 两 个 日 期 间 卫 ; 2 天 12 小 时 12 分 钟 12 秒 . 


8.11 JavaScript 实现 计算 日 期 间隔 


8.12 ”网 页 标题 体现 月 进度 


通 第 一 个 月 分 为 上 上、 中、 下旬， 合理 安排 好 时 间 是 月 计划 能 够 按照 进度 完成 的 有 力 保 障 。 在 
本 节 中 ， 我 们 实现 一 个 网 页 标题 能 够 体现 月 进度 CE. P PO 变化 的 页 面 效 果 。 下 耐看 一 下 具 
体 的 JavaScript 代码 实例 。 


【代码 8-12】( 详 见 源 代码 目录 ch08-js-date-month-title.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 日 期 和 时 间 特 效 - 网 页 标题 体现 月 进度 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style-""» 
«span id-"id-span-date"»«/span» 
«/div» 
«/body» 


«script type-"text/javascript"» 


window.onload = function () { 
var strTitle; 
var date - new Date(); 
var d = date.getDate(); 
if(d <= 10) ( 
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23 strTitle = '" 上 名， 请 安排 好 月 计划 '" ,; 
24 ) else if(d > 10 && d <= 20) ( 

25 strTitle = ' 中 旬 ， 请 合理 安排 时 间 '; 
26 } else if(d > 20) { 

27 strTitle = ' 下 旬 ， 请 抓紧 完成 月 计划 ' ; 
28 ) else ( 

29 strTitle 


30 } 

document.title = strTitle; 

32 var today = date.toLocaleDateString(); 

a document.getElementById('id-span-date').innerText = "今天 :" + today; 
34 }; 

45 «fsocripb» 

36 «/html» 


关于 【代码 8-12】 的 说 明 : 

e 第 21 行 代码 通过 getDate() 方 法 获取 了 当前 日 期 。 

e 第 22~30 行 代码 通过 让 条 件 语句 判断 当前 日 期 是 月 上 和 旬 、 中 多 或 下 和 旬 ， 并 根据 判断 结果 定 
义 不 同 的 网 页 标题 信息 ( strTitle )。 

e 第 31 行 代码 通过 将 网 页 标题 信息 (strTitle ) IRA Document *T $45 title 属性 来 实现 网 页 标题 
体现 月 进度 的 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 有 具体 效果 如 图 8.12 所 示 。 


图 8.12 JavaScript 实现 网 页 标题 体现 月 进度 
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8.13 ”用 表格 制作 日 历 


Æ HTML irr, 日 期 的 最 常用 表现 形式 就 是 日 历 控 件 了 。 WRH, 一 年 是 12 个 月 份 ， 每 
个 月 份 是 30 天 左右 ， 按 照 一 周 7 天 来 排序 ， 每 个 月 份 用 一 个 7 列 的 表格 就 可 以 很 清晰 的 表示 出 来 
f. EX, XB] HTML 日 历 控件 就 可 以 使 用 表格 <table> 元 素 ， 再 结合 JavaScript 脚本 语言 动态 
编程 制作 出 来 。 

下 面 ， 有 具体 介绍 一 个 通过 JavaScript 实现 用 表格 制作 日 历 的 代码 实例 。 


【代码 8-13】( 详 见 源 代码 目录 ch08-js-date-tb-calendar.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 日 期 和 时 间 特 效 - 用 表格 制作 日 历 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center"> 
<p> 
反击 选择 日 历 : 
<select id="y"></select> 年 
«select id="m"></select>H 
«/p» 
«table id-"id-tb-date" border-"1" align-"center"»«/table» 
«span id-"id-span-info"»«/span» 
«/div» 
</body> 
<script type="text/javascript"> 
window.onload = function () { 
var y = document.getElementById('y'); 
var m = document.getElementById('m'); 
vår SErY — 1r; 
for (let i = 2019; i <= 2020; i++) { 
sEbrY t= 'eopt:ion value-"' Fi F1 4 i 4 'cfopbEron»'; 
} 
y.innerHTML = strY; 
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032 
033 
034 
035 
036 
037 
038 
039 
040 
041 
042 
043 
044 
045 
046 
047 
048 
049 
050 
051 
052 
053 
054 
055 
056 
057 
058 
059 
060 
061 
062 
063 
064 
065 
066 
067 


068 
069 
070 


071 
072 


JavaScript Vue- React 全 程 实例 


strM = ''; 
for (let j] = 1; j <= 12; TH) ( 
StrM t= '«option value="! 4*4 j * '"»' * <option 
) 
m.innerHTML = strM; 
m.onchange = function () { 
var year - document.getElementById('y').value; 
year - parseInt(year); 
var month = parseInt (this.value); 


var days = 31; 


if (isRunYear (year) && month == 2) { 
days = 29; 
} else if (!isRunYear (year) && month == 2) { 
days = 28; 
} else if (month == 
|| month == 6 
|| month == 9 
|| month == 11) { 
days = 30; 
Í 
ee 
Var strW = '<tr>'; 


for (var w= 0; We 7; wit) f 
strW += '<td> 星 期 ' + arrWeek[w] + '«/td»'; 
} 
strW += '«/tr5'; 
var date - new Date(year, month - 1, 1); 
var week - date.getDay(); 
if (week -- 7) 
week = 0; 
var q =; 
while (true) { 
strW += '<tr>'; 
Tof (var i = 07 L< Tr itt} f 
if (j == 1 && i == week) { 
SLEM 1— '«td onclick-"showDay(this, 于 十 “二 十 "1 
-Ad 
Irt 
} else if (j > 1 && j <= days) { 
SEFW T= "td bonelick-"showDay(this, FIF" i) 
TII ERES 
Dr 


) else 
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073 strW += '«td»&nbsp;«/td»'; 

074 } 

075 strW += '«/tr»'; 

076 1f (j > days) 

077 break; 

078 } 

079 document.getElementById('id-tb-date').innerHTML = strW; 

080 }; 

081 l; 

082 function isRunYear(y) { 

083 return y $4 == 0; 

084 } 

085 function showDay(el, d, w) { 

086 console.log(el); 

087 setTbBgColor (el); 

088 var y = document.getElementById('y').value; 

089 var m = document.getElementById('m').value; 

090 Var avcrW — ['H*, '—, *— 1 ge Ir Cni 113 

091 var strW = ' 星 期 '， 

092 for (let i2 0; 1 < 7; itt) í 

093 if (i == w) ( 

094 StrW += arrW[i]; 

095 break; 

096 } 

097 } 

098 var strInfo = ' 您 选择 的 日 期 是 : ! + y + ' 年 + m+ ' 月 ' + d + ' 日 ， 
I BLIN TOSS 

099 document.getElementById('id-span-info').innerText = strInfo; 

100 } 

101 function setTbBgColor(el) { 

102 var tds = document.getElementsByTagName ("td"); 

103 for (let i = 0; i < tds.length; i++ f 

104 tds[i].style.backgroundColor = ""; 

105 } 

106 el.style.backgroundColor = "gray"; 

107 } 


108 «</script> 
109 «/html» 


天 于 【代码 8-13】 的 说 明 : 


e 第 016 行 和 第 017 行 代码 分 别 使 用 <selelct> 标 签 元 素 定义 了 两 个 下 拉 列 表 框 ， 用 于 显示 提供 
给 用 户 进行 选择 的 年 份 ( <selelct id="y"> ) 和 月 份 (<selelct id="m"> ), 


176 | Javascript+Vue+React 全 程 实例 


e 第 019 行 代码 使 用 <table id="id-tb-date"> 标 签 元 素 定义 了 一 个 表格 ， 用 于 显示 通过 JavaScript 
脚本 动态 生成 的 日 历 。 

e 第 020 行 代码 使 用 <span id="id-span-info"> 标 签 元 素 定 义 了 一 个 行内 容器 , 用 于 显示 用 户 通 过 
单 击 所 选择 具体 日 期 的 提示 信息 。 

e 第 024~081 行 代码 定义 了 页 面 初 始 化 加 载 (onload) 的 过 程 代 码 。 其 中 ， 第 028 ~ 030 行 代 
码 和 第 033 ~ 035 行 代码 通过 使 用 for 循环 语句 初始 化 了 年 份 (2019 ~ 2020) 和 月 份 (1~ 12), 
用 户 可 以 通过 选择 具体 的 年 份 和 月 份 来 动态 创建 并 显示 表格 日 历 . 第 037~ 080 行 代 码 定义 了 
月 份 (<selelct id="m"> ) 下 拉 列 表 框 的 onchange 事件 处 理 方 法 。 第 042 ~ 051 行 代 码 用 于 季 
选 月 份 (大 月 、 小 月 和 头 月 ) 的 天 数 (31 天 、30 天 、28 天 或 29 天 )， 其 中 自 定义 isRunYear() 
方法 用 于 判断 关 年 ( 闫 月 为 29 X). 第 052~057 行 代码 用 于 动态 生成 表格 日 历 的 星期 栏 ( 星 
期 日 ~ 星期 入， 符合 西历 标准 )、 第 058-079 行 代码 用 于 动态 生成 具体 的 日 历 ， 其 中 第 067 
行 代码 和 第 070 行 代码 定义 了 <td> 标 签 元 素 的 单 击 onclick 事 处 理 方 法 (showDay() )， 当 用 户 
单 击 具体 日 期 时 会 在 页 面 中 显示 关于 日 期 的 提示 信息 。 

e 第 085 ~100 行 代码 是 自 定义 showDay() 方 法 的 实现 过 程 ,该 方法 会 将 用 户 单 击 选 择 的 日 期 (以 

“年 、 月 、 日 星期 几 ” 的 格式 ) 在 <span id="id-span-info"> 标 签 元 素 中 进行 显示 。 

e 第 101~107 行 代码 是 自 定义 setTbBgColor() 方 法 的 实现 过 程 ， 该 方法 会 突出 显示 表格 日 历 中 

用 户 单 击 选择 的 日 期 的 背景 色 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.13 所 示 。 


JavaScript 全 程 实例 x | 十 一 口 JavaScript 全 程 实例 x |+ = 口 


Œ ®© localhost63342 -Jy X G © localhost63342 -Jr o» 


JavaScript 日 期 和 时间 特效 - 用 表格 制作 日 历 JavaScript 日 期 和 时 间 特 效 - 用 表格 制作 日 历 


点 击 选择 日 历 : |2019 v [1 ~ 上 月 点 击 选择 日 历 : |2019 «kr |1 ~ 上 月 


您 选择 的 日 期 是 : 2019 年 1 月 2 日 . 星期 二 . 


图 8.13 JavaScript 实现 用 表格 制作 日 历 


如 图 8.13 中 第 头 所 示 ， 左 边 页 面 中 显示 了 表格 日 历 (2019 年 1 HO. 动态 生成 后 的 效果 ， 右 边 
页 面 中 显示 了 用 户 选 择 具 体 日 期 (2019 年 1 月 2 日 ) 后 的 效果 。 


8.14 日 期 输入 框 


在 HTML 5 语法 中 ， 专 门 新 增 了 一 个 日 期 输入 框 控 件 ， 使 用 <input type="date"> 标 签 就 可 以 实 
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现 。 那 么 ， 之 前 HTML 版 本 中 的 日 期 输入 框 控 件 是 如 何 实现 的 呢 ? 其 实 ， 基 于 8.13 节 中 实现 的 表 
格 日 历 ， 再 结合 使 用 文本 框 ， 同 样 可 以 通过 JavaScript 脚本 语言 动态 生成 日 期 输入 框 控 件 。 下 面具 
体 介绍 一 个 通过 JavaScript 实现 日 期 输入 框 的 代码 实例 。 


【代码 8-14】( 详 见 源 代码 目录 ch08-js-date-input-calendar.html 文件 ) 


001 «!doctype html» 
002 «html lang-"en"» 


003 «head» 

004 «1-- 添加 文档 头 部 内 容 --» 

005 «title»JavaScript 全 程 实例 </title> 
006 </head> 

007 <body> 


008 <!-- 添加 文档 主体 内 容 --> 

009 <header> 

010 <nav>JavaScript 日 期 和 时 间 特 效 - 日 期 输入 框 </nav> 
011 </header> 

012 «!-- 添加 文档 主体 内 容 --> 


013 «div id-"id-div-center" style=""> 


014 <p> 

015 日 期 输入 框 :<input type="text" id="id-input-date" 
onfocuss-"initDate(this.id);"/» 

016 </p> 

017 <div id="id-div-date" style=""> 

018 <p> 

019 <select id="y"></select> 年 

020 <select id="m" onchange="fillTbCalendar () ;"></select> 月 

021 «/p» 

022 «table id-"id-tb-date" border-"1" align-"center"»«/table» 

023 «/div» 

024 </div> 


025 </body> 
026 «script type-"text/javascript"» 


027 window.onload = function () { 

028 document.getElementById("id-input-date").value = ""; 
029 fillSelCalendar(); 

030 }; 

031 function fillSelCalendar() { 

032 var y = document.getElementById('y'); 

033 var m = document.getElementById('m'); 

034 var strY = :; 


035 for (let i = 2019; i <= 2020; i++) { 
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036 SLEY 4- '«option value-"' c i * '"»' 4 i * '«/option»'; 
037 } 

038 y.innerHTML = strY; 

039 strM - ''; 

040 ftor (letj = i:i] S 2 Jih i 

041 SErM 1— 'eontron value="! 4 4 4 '"5'ob 3 tL '"sfopbErons's 
042 } 

043 m.innerHTML - strM; 

044 } 

045 function initDate(thisid) ( 

046 document.getElementById(thisid).value = ""; 

047 var now - new Date(); 

048 var yyyy = now.getFullYear(); 

049 var mm = now.getMonth() + 1; 

050 var dd = now.getDate(); 

051 var week - now.getDay(); 

052 war arroek =- EE oot ER 
053 var strWeek = ' 星 期 '; 

054 ea 

055 if (i == week) { 

056 strWeek += arrWeek[i]l; 

057 break; 

058 } 

059 } 

060 var strInfo = yyyy + 'Ẹ' + mm + 'H' + dd + 'H ' + strWeek; 
061 document.getElementById(thisid).value - strInfo; 

062 var divDate = document.getElementById('id-div-date'); 

063 var year - document.getElementById('y'); 

064 var month - document.getElementById('m'); 

065 year.value - yyyy; 

066 month.value - mm; 

067 divDate.style.display = 'block'; 

068 fillTbCalendar(); 

069 } 

070 function fillTbCalendar()í 

071 var year - document.getElementById('y').value; 

072 year - parseInt(year); 

073 var month = parseInt (document.getElementById('m').value); 
074 var days = 31; 

075 if (isRunYear(year) && month == 2) { 


076 days = 29; 


077 
078 
079 
080 
081 
082 
083 
084 
085 
086 
087 
088 
089 
090 
091 
092 
093 
094 
095 
096 
097 
098 
099 
100 


101 
102 
103 


104 
105 
106 
107 
108 
109 
110 
Tii 
112 
T3 
114 
ToS 
116 
LL 
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) else if (!isRunYear(year) && month == 2) { 


days - 28; 
) else if (month -- 
|| month == 6 
|| month == 9 
|| month == 11) { 
days = 30; 
} 
var arrWeek = ['H', '—', '—', '—', "DV, m, ARE 
var strW = '«tr»5'; 


for (var w = 0; w < 7; w++) ( 
strW += '«td»/ÉHH' + arrWeek[w] + '«/td»'; 
} 
strW += '«/tr»'; 
var date - new Date(year, month - 1, 1); 
var week - date.getDay(); 
if (week -- 7) 
week = 0; 
var j = l} 
while (true) ( 
strW += '«tr»'; 
for (war i — 0; 3 < 7; iti) f 
if (j == 1 && i -- week) ( 
SLIN t= '«td onclick-2"showDay(this,' * j * ', 
'" 4i 'yireftd»'; 
TEE: 
} else if (j > 1 && j <= days) { 
SLIN 4— "<td onclipk-"showDaov(Eh:s, " E34 * .' Lad > 
dE b S ELS a a 
村 下 
} else 
strW += '«td»&nbsp;«/td»'; 
) 
strW += '«/tr»5'; 
if (j > days) 
break; 
} 
document.getElementById('id-tb-date').innerHTML = strW; 


function isRunYear(y) { 


return y $ 4 -- 0; 


function showDay(el, d, w) { 
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118 setTbBgColor (el); 

119 var y = document.getElementById('y').value; 

120 var m - document.getElementById('m').value; 

121 有 
T22 var strW 

123 for (let i= 0; i ; i++) { 

124 TELE 

125 strW += arrW[i]; 

126 break; 

T27 

128 | 

129 var strInfo = y + ' 年 ' +m + 'H' +d + 'H ' + strW; 
130 document.getElementById('id-input-date').value = strInfo; 
T31 } 

132 function setTbBgColor(el) { 

133 var tds = document.getElementsByTagName ("td"); 

134 for (let 3» = Ur 1 € Eds.length; 1+7) | 

235 tds[i].style.backgroundColor = ""; 

136 ) 

[37 el.style.backgroundColor - "gray"; 

138 } 

139 «/script» 

140 «/html» 


关于 【代码 8-14】 的 说 明 : 

@ 【代码 8-14】 是 在 【代码 8-13】 的 基础 上 改进 而 成 的 ， 主 要 是 第 015 行 代码 增加 了 一 个 日 期 
输入 框 ， 用 于 显示 用 户 选择 的 日 期 (初始 状态 为 当前 日 期 )。 

e 第 045- 069 行 代码 实现 的 自 定 义 initDate() 方 法 用 于 初始 化 日 期 输入 框 ， 日 期 输入 框 的 初始 


化 状态 为 当前 日 期 。 
e 第 070~113 行 代码 实现 的 自 定 义 fillTbCalendar0 方 法 用 于 初始 化 表格 日 历 ， 初 始 状态 为 当前 
日 期 的 月 份 日 历 。 


e 第 117~131 行 代码 实现 的 自 定义 showDay() 方 法 用 于 在 日 期 输入 框 中 显示 用 户 选 择 的 日 期 ， 
日 期 格式 为 “YYYY 年 MM 月 DD 日 星期 W?”。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 8.14 所 示 。 
如 图 8.14 中 第 关 所 示 ， 左 边 页面 中 显示 了 初始 状态 (当前 日 期 ) 的 日 期 输入 框 ， 右 边 页 面 中 
显示 了 用 户 选 择 (2019 年 1 月 8 日 星期二) 的 日 期 输入 框 。 
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E] JavaScript 全 程 实例 x El] JavaScript 全 程 实例 X | 十 口 


Q' © localhost:63342/js- eor » Œ © localhost:63342/js- Df X 


JavaScript 日 期 和 和 时间 特效 - 日 期 输入 框 JavaScript 日 期 和 时 间 特 效 - 日 期 输入 框 


Jem Tora 


日 期 输入 框 : |2019 年 1 月 3 日 星期 四 | 日 期 输入 框 : |2019 年 1 月 8 日 星期 二 


ms vk [i VJ 


图 8.14 JavaScript 实现 日 期 输入 框 
8.15 显示 网 页 登录 时 间 


很 多 网 站 会 有 一 个 显示 用 户 登 录 页 面 时 间 的 功能 ， 基 本 原理 都 是 通过 设 定 计时 器 来 实现 的 。 
下 面 看 一 个 通过 JavaScript 实现 显示 网 页 登录 时 间 的 代码 实例 。 


【代码 8-15】( 详 见 源 代码 目录 ch08-js-date-login-time.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

«head» 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 

</head> 

<body> 

<!-- 添加 文档 主体 内 容 --> 


<header> 


<nav>JavaScript 日 期 和 时 间 特 效 - 显示 网 页 登录 时 间 </nav> 
«/header» 
«i-- 添加 文档 主体 内 容 --> 


«div id-"id-div-center" style-""» 


«span id-"id-span-login-time"»«/span» 
«/div» 
</body> 
<script type="text/javascript"> 

var s = 0; // TODO: # 

var m = 0; // TODO: 分 钟 
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20 var h = 0;// TODO: 小 时 

21 window.onload = function () { 

22 window.setInterval(function () { 

23 stt; — // TODO: 秒 +1 

24 if (s == 60) ( // TODO: 如 果 秒 为 60 

25 s-0; // TODO: FPES 

26 m += 1; // TODO: 分 钟 +1 

21 

28 if (m == 60) ( // TODO: 如 果 分 钟 为 60 

29 m = 0; // TODO: 分 钟 置 零 

30 h += 1; // TODO: 小 时 +1 

31 } 

32 var strLoginTime = "您 已 登录 , 累计 时 间 :" + hoe "时 "+m+ 
"分 "+s+" 秒 ."，; 

33 document.getElementById('id-span-login-time').innerText - 
strLoginTime; 

34 lh 1000); 

35 }; 

36 </script> 

STEEL > 


关于 【代码 8-15】 的 说 明 : 

e 第 18~20 行 代码 定义 了 一 组 变量 (s、m、h )， 分 别 用 于 表示 秒 、 分 钟 和 小 时 。 

e 第 22~34 行 代码 通过 setInterval(0) 方 法 定义 了 一 个 计时 器 ， 时 间 间 隔 为 1000 毫秒 (1 秒 )。 在 
每 一 次 计时 器 定义 的 时 间 间 隔 (1 秒 ) 内 ， 对 秒 数 变量 (s) 进行 一 次 累加 (+1) 操作 ; 而 当 
XE (s) 累加 到 60 (1 分 钟 ) 时 ， 对 分 钟 变 量 (m ) 进行 一 次 累加 (+1 ) 操作 ; 而 当 变量 (m ) 
累加 到 60 (1 小 时 ) 时 ， 再 对 小 时 变量 (h ) 进行 一 次 累加 (H1) 操作 。 按 照 这 个 方法 进行 
时 间 的 累加 ， 从 而 实现 对 用 户 登 录 网 页 时 间 的 计时 功能 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 8.15 所 示 。 
| JavaScript 全 程 实例 X | T m o 


Œ © localhost:6334; -Jr >» 


JavaScript 日 期 和 时 间 特 效 - 显示 网 页 登录 时 间 


您 已 登录 , 累计 时 间 : 0 时 3 分 18 秒 . 


图 8.15 JavaScript 实现 显示 网 页 登录 时 间 
如 图 8.15 中 第 头 所 示 ， 页 和 面 中 显示 了 用 户 登 录 网 页 的 累计 时 间 (0 时 3 分 18 秒 ) 。 


第 9 章 网 页 特效 


本 章 介 绍 如 何 通 过 JavaScript 来 实现 网 页 的 各 种 特效 ， 通 过 这 些 特效 来 丰富 HTML 页 面 的 设 
计 手 段 和 展示 效果 。 


9.1 网 页 概述 


网 页 是 构成 网 站 的 主体 元 素 , 一 个 网 页 是 由 各 种 HTML 标签 和 各 类 资源 所 构成 的 超 文 本 文件 。 

在 JavaScript 脚本 语言 中 ,除了 可 以 针对 各 种 页 面 元 素 进行 编程 设计 外 ， 还 可 以 针对 整体 网 页 
(浏览 器 特性 、 窗 口 属 性 、 滚 动 条 控制 、 键 盘 鼠 标 控制 和 页 面 特效 等 ) 进行 编程 设计 。 

JavaScript 网 页 特效 是 网 站 开 友 中 很 重要 的 一 个 环节 ， 很 多 很 特殊 的 功能 都 是 通过 网 页 特效 来 
实现 的 。 本 章 将 为 读者 介绍 多 种 网 页 特效 的 代码 实例 。 


9.2 打开 新 页 面 


在 HTML 页 面 中 打开 新 页 面 可 以 使 用 很 多 种 方法 来 实现 ， 比 如 直接 使 用 超 链接 <a> 标 签 元 素 ， 
或 者 使 用 Window 对 象 的 open0 方 法 ， 叉 或 者 直接 使 用 “javascript:open” 脚 本 语言 的 方式 。 在 本 市 
中 ， 我 们 就 详细 介绍 几 种 打开 新 页 面 的 代码 实例 。 


【代码 9-1】( 详 见 源 代码 目录 ch09-js-html-open.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 
«body» 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 打开 新 页 面 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 


«div id-"id-div-center" style=""> 
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«a href="open.html"> 打 开 新 页 面 </a> 
<a href="open.html" target=" blank"> 打 开 新 页 面 (target=" blank")</a> 
«a onclick="window.open('open.html')"> 打 开 新 页 面 (window.open)«/a» 
«input type-"button" value=" 打 开 一 个 新 的 窗口 (window.open)" 
onclick="window.open ('open.html')"/> 
<input type="button" value=" 打 开 一 个 新 的 窗口 (function)" 
onclick="openNewHtml ('open.html')"/» 
«a href="javascript:openNewHtml ('open.html')"> 打 开 新 页 面 
(javascript:function)</a> 
</div> 
</body> 
«script type-"text/javascript"» 
function openNewHtml (url) { 
window.open (url); 
} 
</script> 
</html> 


关于 【代码 9-1】 的 说 明 : 

o 第 14 行 和 第 15 行 代 码 分 别 通过 <a> 标 签 元 素 定 义 了 一 个 超 链接 , href 属性 值 定义 了 一 个 新 的 
网 页 (href-"open.html" )。 这 两 行 代 码 均 可 以 打开 新 页 面 ， 但 区 别 是 第 15 行 代码 定义 的 <a> 
标签 元 素 增 加 定义 了 一 个 target 属性 (target=" blank" )， 表 示 新 页 面 将 会 在 新 窗口 中 打开 。 
具体 的 页 面 效 果 如 图 9.1 和 图 9.2 所 示 。 

e 第 16 行 代码 通过 <a> 标 签 元 素 定 义 了 一 个 超 链接 ， 不 过 是 使 用 onclick 事件 方法 取代 了 href 
属性 ， 在 onclick 事件 方法 中 直接 调用 Window 对 象 的 open() 方 法 打开 新 页 面 ( 该 方法 默认 是 
在 新 窗口 中 打开 网 页 )。 

e 第 17~18 行 代码 和 第 19~ 20 行 代码 分 别 通过 <input type="button"> 标 签 元 素 定 义 了 一 个 按 
钮 ， 然 后 通过 onclick 事件 方法 实现 打开 新 页 面 的 操作 。 二 者 的 区 别 是 ， 第 20 行 代 码 定 义 的 
onclick 事件 方法 是 通过 调用 一 个 自 定 义 openNewHtml0 方 法 来 实现 的 。 第 25 ~ 27 行 代 码 是 
openNewHtml() 方 法 的 实现 过 程 ， 不 过 第 26 行 代码 仍旧 是 通过 调用 Window 对 象 的 open() 方 
法 实现 打开 新 页 面 的 。 

o 第 21 行 代码 定义 的 <a> 标 签 元 素 比 较 特 殊 ， 在 href 属性 值 中 是 直接 通过 定义 JavaScript 脚本 

( javascriptopenNewHtml() ) 的 方式 打开 新 页 面 的 ， 这 种 使 用 方式 虽 不 和 常用， 但 也 需要 读者 
理解 掌握 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.1 和 图 9.2 所 示 。 

如 图 9.1 中 策 头 和 标识 所 示 ， 在 使 用 第 14 行 代码 定义 的 超 链接 打开 新 页 面 时 ， 是 在 当前 窗口 

中 打开 的 。 

如 图 9.2 中 第 头 和 标识 所 示 ， 在 使 用 第 15 行 代 码 定 义 的 超 链 接 打 开 新 页 面 时 ， 是 在 新 窗口 中 

打开 的 。 


> Q ®© localhost:63342 e» > CQ © localhost63342 e 20» 


JavaScript 网 页 特效 - 打开 新 页 面 JavaScript 网 页 特效 - 新 页 面 


打开 新 页 面 | 1/4/2019, 11:19:23 AM 
target="_blank" 
打开 新 页 面 (window open) 


_ 打开 一 个 新 的 窗口 (window.open) - 
打开 一 个 新 的 窗口 (function) 


图 9.1 JavaScript 实现 打开 新 页 面 (一 ) 
| Eg JavaScript 全 程 实例 


> CG © localhost:63342 e 9$» 


JavaScript 网 页 特效 - 打开 新 页 面 Javascript 网 页 特效 - 新 页 面 


IDE 1/4/2019, 11:23:44 AM 
打开 新 页 面 (target=”blank") 
打开 新 页 面 (window open) 


_ 打开 一 个 新 的 窗口 (window.open) | 


| 打开 一 个 新 的 窗口 (function) 
打开 新 页 面 ( jptfunction) 


图 9.2 JavaScript 实现 打开 新 页 面 ( 二 ) 
9.3 打开 指定 大 小 的 窗口 


在 9.2 节 中 ， 我 们 初步 介绍 了 使 用 Window 对 象 的 open() 方 法 打开 新 窗口 。 其 实 ， 通 过 open() 
方法 还 可 以 自 定义 新 窗口 的 特性 , 最 常用 的 就 是 指定 新 窗口 的 大 小 尺寸 。 在 本 节 中 将 详细 介绍 一 个 
打开 指定 大 小 窗口 的 JavaScript 代码 实例 。 


【代码 9-2】( 详 见 源 代码 目录 ch09-js-html-open-size.html 文件 ) 


<!doctype html» 


«html lang-"en"» 
«head» 


<!-- 添加 文档 头 部 内 容 --> 
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«title»JavaScript 全 程 实 例 </tit1le> 
</head> 
«body» 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 网 页 特效 - 打开 指定 大 小 的 窗口 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
指定 新 窗口 大 小 : 


Width:<input type="text" id="id-window-width" value=""> 


Height:«input type="text" id-"id-window-height" value=""> 
<input type="button" value=" 打 开 指 定 大 小 的 窗口 " 
onclick-"openNewHtml ('open.html')"/» 


«/div» 
</body> 
<script type="text/javascript"> 
function openNewHtml (url) { 
var w, h; 
w = document.getElementById('id-window-width').value; 
if (w == 0) 
w = 100; 
h = document.getElementById('id-window-height').value; 
if (h == 0) 
h = 100; 
window.open (url, '', 'width=' + w + ',height-' + h); 
} 
«/script» 
«/html» 


关于 【代码 9-2】 的 说 明 : 

o 第 15 行 和 第 16 行 代 码 通过 <input> 标 签 元 素 定 义 了 一 组 文本 框 ， 用 于 接收 用 户 自 定义 的 窗口 
大 小 尺寸 ( 宽度 和 高 度 )。 

e 第 17 行 代码 通过 <input type="button"> 标 签 元 素 定义 了 一 个 按钮 ， 并 添加 了 单 击 onclick 事件 
处 理 方法 (openNewHtml0 )， 用 于 打开 新 窗口 页 面 。 

e 第 21~30 行 代码 是 openNewHtml() 方 法 的 实现 过 程 。 其 中 ， 第 29 行 代码 使 用 Window 对 象 
的 open() 方 法 打开 指定 宽度 和 高 度 的 新 窗口 。 另 外 ， 第 24 ~ 28 行 代码 的 作用 是 ， 如 果 用 户 未 
指定 新 窗口 的 宽度 和 高 度 ， 则 指定 默认 值 为 100。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.3 所 示 。 
如 图 9.3 中 的 第 头 所 示 ， 新 打开 的 窗口 尺寸 为 用 户 设 定 的 宽度 值 (300) 和 高 度 值 (150) 。 


JavaScript 全 程 实例 x | El] Javascript 全 程 实例 x | T EM 口 


> Q © localhost6334? ett œŒ © localhost6334? se 为 = 
@ JavaScript 全 程 实例 .. 


Javascript 网 页 特效 - 打开 指定 大 小 的 窗口 


(D localhost.63342/]s 


JavaScript 网 页 特效 - 新 页 面 


指定 新 窗口 大 小 : 
Width: Height 


| 1/4/2019, 5:29:22 PM 
打开 指定 大 小 的 窗口 
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9.4 获取 打开 子 窗口 的 父 窗口 


在 9.3 节 中 , 我 们 介绍 了 如 何 打 开 子 窗口 页 面 。 试 想 一 下 , 如 果 网 站 中 的 父 窗口 和 子 窗 口 很 多 、 
关系 比较 复杂 , 那么 如 何 厘 清 窗 口 之 间 的 父子 关系 呢 ? 这 里 就 需要 用 到 Window 对 象 中 一 个 非常 有 
用 的 opener 属性 了 ， 该 属性 表示 创建 当前 子 窗 口 的 Window 对 象 引 用 ( 乍 听 起 来 比较 抛 口 ， 其 实 
就 是 指 的 父 窗 口 )。 

在 本 节 中 ， 简 单 介绍 一 个 获取 打开 子 窗 口 的 父 窗口 的 JavaScript 代码 实例 。 这 里 ， 我们 需要 创 
建 两 个 页 面 文件 ， 一 个 是 父 窗 口 页 面 ， 男 一 个 是 子 窗口 页 面 。 痛 先 ， 看 一 下 父 窗口 的 页 面 代码 。 


【代码 9-3】( 详 见 源 代码 目录 ch09-js-html-parent.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 网 页 特效 - 获取 打开 子 窗口 的 父 窗口 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
«input type="button" value-"1TJf T &i Ll"onclick-"openNewWindow 
('ch09-js-html-sub.html')"/» 


«span id-"id-span-parent"»«/span» 
«/div» 
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</body> 
<script type="text/javascript"> 


function openNewWindow (url) { 
var curUrl = window.location.href.split('?') [0]; 
document.getElementById('id-span-parent').innerHTML += 
"Current url: " F curUri; 
var subWin - window.open (url); 
var winUrl - subWin.opener.location.href.split('?')[0]; 
document.getElementById('id-span-parent').innerHTML += 
"Hetnurn url: " 4 winUrl; 
) 
</script> 
</html> 


关于 【代码 9-3】 的 说 明 : 


e 第 14 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 


(openNewWindow() )， 用 于 打开 子 窗口 。 


e 第 19~25 行 代码 是 openNewWindow() 方 法 的 实现 过 程 。 首先 ， 第 20 行 代码 使 用 Location X1 $- 


的 href 属性 获取 了 当前 页 面 ( 父 页 面 窗口 ) 地 址 。 然后 , 第 22 行 代码 通过 Window 对 和 象 的 open 
方法 打开 了 新 页 面 ( 子 页 面 窗口 )， 该 方法 的 返回 值 保 存在 变量 (subWin) 中 。 最 后 ， 第 2347 
代码 通过 变量 (SubWin ) 调用 opener Ætt, ART XE (subWin) 所 代表 窗口 的 地 址 。 


然后 ， 看 一 下 子 窗口 的 页 面 代码 。 


【代码 9-4】( 详 见 源 代码 目录 ch09-js-html-sub.html 文件 ) 


<!doctype html» 
<html lang="en"> 
<head> 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 子 窗口 页 面 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
«span id-"id-span-sub"»«/span» 
«/div» 
</body> 


<script type="text/javascript"> 


window.onload = function () f 


19 var curUrl - window.location.href.split('?')[0]; 


20 document.getElementById('id-span-sub').innerHTML += 

"UurrenL uri: " T CHEUEL; 
21 Var openerHref = window.opener.location.href.split('?')[0]; 
22 document.getElementById('id-span-sub').innerHTML += 


"opener url: " + openerHref; 
23 }; 


-el 
25 «/html» 


关于 【代码 9-4】 的 说 明 : 


e 第 19 行 代码 使 用 Location 对 象 的 href 属性 获取 了 当前 页 面 ( 子 页 面 窗口 ) 地 址 。 
e 第 21 行 代码 通过 Window 对 象 的 opener 属性 ， 获 取 父 窗口 页 面 的 地 址 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 9.4 所 示 。 


(3 Javascript 全 程 实例 x EE X 


^oc 9 © localhost63342/js-total-sar e 243 » 


JavaScript 网 页 特效 - 获取 打开 子 窗口 的 父 窗口 


初始 父 窗 口 页 面 打开 子 窗口 


个 JavaScript SESA x — Javascript 全 程 实例 x 十 - O X 


FCA © localhost63342/js-total-sam w 回合 » 


JavaScript 网 页 特效 - 获取 打开 子 窗口 的 父 窗口 


Current url: http://localhost:63342/js-total-samples/ch09/ch09-js-html-parent.html 
Return url: http://localhost:63342/js-total-samples/ch09/ch09-js-html-parent.html 


通过 opener 属 性 
ES JavaScript SESA X ” 骨 JavaScript SELA x 十 RAIE hE X 


p G Q GD localhost63342/js-total-sar eO» 


JavaScript 网 页 特效 - 子 窗口 页 面 


Current url: http://localhost:63342/js-total-samples/ch09/ch09-js-html-sub.html 
opener url: http://localhost:63342/js-total-samples/ch09/ch09-js-html-parent.html 


通过 opener 局 性 


获取 的 地 址 


9.4 JavaScript 实现 获取 打开 子 窗口 的 父 窗口 
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如 图 9.4 中 的 第 尖 和 标识 所 示 ， 在 新 打开 的 子 窗口 中 ， 通 过 opener 属性 成 功 获 取 了 父 窗口 的 
地 址 。 


9.5 ”父子 窗口 之 间 数 据 交互 


在 9.4 节 中 ， 我 们 初步 介绍 了 使 用 opener 属性 获取 父 窗口 地 址 的 方法 。 其 实 ， 通 过 opener 属 
性 还 可 以 实现 父 窗口 和 子 窗口 之 间 的 数据 交互 。 在 本 节 中 ， 介 绍 一 个 通过 JavaScript 实现 父子 窗口 
之 间 数 据 交 互 的 代码 实例 。 


首先 ， 看 一 下 父 窗口 的 页 面 代 码 。 


【代码 9-5】( 详 见 源 代码 目录 ch09-js-html-parent-sdata.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 父 窗口 传递 数据 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
<label for="id-input-user"> 用 户 数据 : «/label»«input type="text" 
id="id-input-user"> 
<input value=" 打 开 子 窗口 " onclick="openSubWindow 
('ch09-js-html-sub-sdata.html')"/» 
<span id-"id-span-parent"»«/span» 
«/div» 
«/body» 
«script type-"text/javascript"» 
function openSubWindow(url) { 
var subWin = window.open (url); 
| 
</script> 
</html> 


关于 【代码 9-5】 的 说 明 : 
o 第 14 行 代码 通过 <input id="id-input-user"> 标 签 元 素 定义 了 一 个 文本 框 , 用 户 可 以 输入 一 个 随 
意 数据 。 该 文本 框 既 可 以 将 数据 传递 给 予 窗口 页 面 , 也 可 以 用 来 接收 来 自 子 窗口 页 面 的 数据 。 
o 第 15 行 代 码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 
CopenSubWindow() )， 用 于 打开 子 窗口 。 
e 第 20~22 行 代码 是 openSubWindow() 方 法 的 实现 过 程 。 其 中 ， 第 21 行 代码 通过 Window 对 
象 的 open 方法 打开 了 新 页 面 ( 子 页 面 窗口 ). 


然后 ， 看 一 下 子 窗口 的 页 和 面 代码 。 


【代码 9-6】( 详 见 源 代码 目录 ch09-js-html-sub-sdata.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 子 窗口 传递 数据 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center" style=""> 
«span id="id-span-sub"></span> 
«label for="id-input-return"> 回 传 数 据 :</label><input type="text" 
id-"id-input-return"» 
«input type="button" value=" 回 传 数据 " 
onclick="returnData ('id-input-return')"/> 
</div> 
</body> 
<script type="text/javascript"> 
window.onload = function () { 
var openerVal = window.opener.document.getElementById 
('id-input-user').value; 
document.getElementById('id-span-sub').innerHTML-4- 
"opener value:"-*topenerVal; 
E 
function returnData(id) { 


var vReturnData = document.getElementById(id).value; 
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window.opener.document.getElementById('id-input-user'). 


value - vReturnData; 


} 
«/script» 
«/html» 


关于 【代码 9-6】 的 说 明 : 
e 第 21 行 代码 通过 Window 对 象 的 opener 属性 获取 了 父 窗口 页 面 中 文本 框 中 的 数据 ， 也 就 是 
【代码 9-5] P $14 行 代码 定义 的 文本 框 (<input id="id-input-user"> ), 
e 第 15 行 代码 通过 <input id="id-input-return"> 标 签 元 素 定义 了 一 个 文本 框 ， 用 户 可 以 输入 一 个 
随意 数据 ， 该 数据 用 于 回 传 到 父 窗口 页 面 中 。 
e 第 16 行 代 码 通 过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 
( returnData() )， 用 于 执行 回 传 数据 的 操作 。 
e 第 24-27 行 代码 是 TetumData() 方 法 的 实现 过 程 。 其 中 ， 第 26 行 代码 通过 Window 对 象 的 
opener 属性 将 第 15 行 代 码 中 用 户 输入 的 数据 回 传 到 父 窗口 页 面 ， 也 就 是 回 传 到 【代码 9-5] 
中 第 14 行 代 码 定义 的 文本 框 (<input id="id-input-user"> ) 中 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.5 所 示 。 


i Javas: X Il JavaScri; 
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JavaScript 网 页 特效 - 父 窗口 传递 数据 


填 入 用 户 数据 
用 户 数据 : | parent 4 “parent” 


初始 父 窗口 页 面 


如 Jae x d JavaScrij 
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打开 子 窗口 
父 窗口 收 到 子 窗 
口 回 传 的 数据 
“return sub” 


JavaScript 网 页 特效 - 子 窗口 传递 数据 


了 窗口 接收 到 
父 窗口 的 数据 


opener value: parent 
—————————— [11 pare nt » 


回 传 数据 ; 


品 E ZA TEE 
子 窗口 页 面 
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9.5 JavaScript 实现 父子 窗口 之 间 数 据 交 互 


如 图 9.5 中 的 第 头 和 标识 所 示 ， 父 子 窗口 之 间 通 过 opener 属性 成 功 实现 了 数据 交互 的 操作 。 


9.6 刷新 当前 页 面 


对 于 经 解 上 网 的 用 户 来 讲 ， 刷 新 浏览 器 页 面 是 一 项 必 不 可 少 的 操作 。 尤 其 是 在 页 面 变 慢 、 捞 
述 无 法 啊 应 的 情况 下 ， 就 会 按 下 键盘 上 的 “F5” 键 进行 页 面 刷新 。 那 么 ， 通 过 JavaScript 脚本 语言 
如 何 实现 页 面 的 刷新 操作 呢 ? 在 HTML DOM 中 ，Location 对 象 中 定义 有 一 个 reload() 方 法 ， 用 于 
重新 加 载 当 前 文档 。 在 本 节 中 ， 就 介绍 如 何 通过 JavaScript 实现 刷新 当前 页 和 面 的 代码 实例 。 


【代码 9-7】( 详 见 源 代 码 目录 ch09-js-html-refresh.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
«nav»JavaScript 网 页 特效 - 刷新 当前 页 面 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-center" style=""> 
«input type="button" value=" 人 工 方式 刷新 页 面 " onclick-"refreshManual()"/» 


«input type="button" value=" 目 动 刷新 页 面 " onclick-"refreshAuto()"/» 
«/div» 
«/body» 
«script type-"text/javascript"» 


function refreshManual() { 
var log - "manual refresh log : 
window.location.reload(); 
var mdate - new Date(); 
log += mdate.toLocaleString(); 
console.log(log); 
} 
// TODO: define timer variables 
var timer - null; 
function refreshAuto() { 
var log = "init log : "; 
var pdate - new Date(); 
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31 log += pdate.toLocaleString() + "An"; 

32 console.log (log); 

33 timer - self.setTimeout(function () (  // TODO: setTimeout 
34 window.location.reload(); 

35 var adate - new Date(); 


36 log += "auto refresh log : "+ adate.toLocaleString() + "Mn"; 


37 console.log (log); 

38 clearTimeout (timer); 
39 ), 3000); 

40 } 

41 «/script» 

42 «/html» 


关于 【代码 9-7】 的 说 明 : 

o 第 14 行 和 第 15 行 代码 通过 <input type="button"> 标 签 元 素 定 义 了 两 个 按钮 ,分 别 用 于 实现 “人 
工 方式 刷新 页 面 ” 和 模拟 “自动 刷新 页 面 ”的 两 种 操作 方式 。 

e 第 19~25 行 代码 是 refreshManual(0) 方 法 的 实现 过 程 ,用 于 实现 “人 工 方式 刷新 页 面 ” 的 操作 。 
在 第 21 行 代码 中 ， 通 过 调用 Location 对 象 的 relaod() 方 法 来 实现 重新 加 载 文档 (等 于 刷新 当 
前 页 面 )。 

e 第 28~40 行 代码 是 refreshAuto() 方 法 的 实现 过 程 ， 用 于 实现 模拟 “自动 刷新 页 面 ”的 操作 。 
其 中 ， 第 33~ 39 行 代码 通过 使 用 setTimeout() 方 法 设 定 了 一 个 时 间 延 迟 (3s )， 然 后 通过 调用 
Location 对 象 的 relaod() 方 法 来 实现 刷新 当前 页 面 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.6 和 图 9.7 所 示 。 
t9 JavaScript 全 程 实例 X 


Œ © localhost.63342/ 


JavaScript 网 页 特效 - 刷新 当前 页 面 


人 工 方式 刷新 页 面 。 ”自动 刷新 页 面 
[rR COInspector 团 JConsole © Debugger » 


TT Y Filter output O Persist Logs 


manual refresh log : 1/9/2019, ch89- js-html-refresh.html:51:9 
4:39:59 PM 


图 9.6 JavaScript 实现 刷新 当前 页 面 (人工 方式 ) 
如 图 9.6 中 篆 头 所 示 ， 在 单 击 “ 人 工 方式 刷新 页 面 ”按钮 后 ， 浏 览 器 控制 台中 显示 了 相应 的 


信息 。 
如 图 9.7 中 篆 头 的 标识 所 示 ， 在 单 击 “ 目 动 刷 新 页 面 ”按钮 后 ， 浏 览 器 控制 台中 分 别 显示 了 目 
动 刷新 前 和 目 动 刷新 后 的 两 行 信息 。 


和 JavaScript SEXA 


^ QC © localhost63342/js-tota 


JavaScript 网 页 特效 - 刷新 当前 页 面 


_ 人工 方式 刷新 页 面 。 自动 刷新 页 面 
(qm CQ Inspector [Console C» Debug » 


W Y Filter output [ ]Persist Logs 


init log : 1/9/2019, 4:42:38 PM ch89-js-html-refresh.html:70:13 
auto refresh log : 1/9/2019, 4:42:41 PM 


» | 


图 9.7 JavaScript 实现 刷新 当前 页 面 ( 模 拟 自动 ) 


9.7 屏蔽 鼠标 右键 


在 茶 些 需要 保护 网 页 内 容 的 网 站 中 ， 通 常 是 屏蔽 掉 鼠 标 右键 的 ， 也 就 是 由 用 户 笃 试点 击 鼠 标 
右键 的 操作 是 无 效 的 。 在 本 节 中 ， 介 绍 一 个 如 何 通过 JavaScript 实现 屏蔽 鼠标 右键 的 代码 实例 。 


【代码 9-8】( 详 见 源 代码 目录 ch09-js-html-forbidden-rightmouse.html 文件 ) 


01 <script type="text/javascript"> 
02 document.onmousedown = function (e) { 


03 // TODO: 判断 事件 的 值 是 否 为 鼠标 右键 


04 if (e.button == 2) ( 

05 alert (' 禁 用 鼠标 右键 !1');  // TODO: 提示 用 户 禁 用 鼠标 右键 
06 } 

07 } 

08 </script> 


关于 【代码 9-8】 的 说 明 : 

o 第 02~07 行 代码 定义 了 监听 Document 对象 中 鼠标 点 击 onmousedown 事件 的 方法 函数 ,其 中 ， 
第 04 ~ 06 行 代码 通过 判断 Event 对 象 的 button 属性 值 是 否 为 2 ( 指 代 和 鼠标 右键 ) 来 实现 屏蔽 
鼠标 右键 的 操作 。 


9.8 ”屏蔽 上 下 文 菜单 


除了 屏 菩 鼠标 右键 操作 ， 还 有 一 个 屏 藤 上 下 文集 单 的 操作 ， 二 者 在 效果 上 是 差不多 的 。 对 于 
屏蔽 上 下 文 菜单 的 操作 ， 我 们 可 以 通过 监听 oncontextmenu 事件 来 实现 。 在 本 节 中 ， 将 介绍 一 个 如 
何 通过 JavaScript 实现 屏 责 上 下 文 染 单 的 代码 实例 。 
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【代码 9-9】( 详 见 源 代码 目录 ch09-js-html-forbidden-contextmenu.html 文件 ) 


01 <script type="text/javascript"> 

02 document.oncontextmenu = function (e) { 
03 e.returnValue - false; 

04 }; 

05 </script> 


关于 【代码 9-9】 的 说 明 : 

e 第 02-04 行 代码 定义 了 监听 Document 对 象 中 上 下 文 菜单 oncontextmenu 事件 的 方法 函数 ， 
其 中 ， 第 03 行 代码 通过 设 定 Event 对 象 的 retumValue 属性 值 为 否 (false ) 来 实现 屏蔽 上 下 文 
菜单 的 操作 。 


9.9 Fia hI) BE 


ARKKA A ERAPR RE ET BERI FS ERE, nT ORAT oncopy 
事件 来 实现 。 在 本 节 中 ， 将 介绍 一 个 如 何 通 过 JavaScript 实现 屏蔽 网 页 复制 功能 的 代码 实例 。 


【代码 9-10】( 详 见 源 代码 目录 ch09-js-html-forbidden-copy.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 


<body oncopy-"alert (' 禁 止 复制 网 页 内 容 !') ;return false;"> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 禁止 复制 </nav> 
</header> 
</body> 
</html> 


关于 【代码 9-10】 的 说 明 : 


o 禁止 网 页 复制 的 关键 代码 在 第 07 行 的 <body> 标 签 元 素 中 ， 通 过 为 oncopy 事件 方法 定义 返回 
值 false 来 实现 禁止 复制 内 容 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.8 所 示 。 


Search Google for "JavaScript 网 页 特效 .…” 
View Selection Source 


Inspect Element (Q) 
Inspect Accessibility Properties 


9.8 JavaScript 实现 屏蔽 复制 功能 
如 图 9.8 中 第 头 所 示 ， 在 选择 页 和 面 内 容 并 右 击 后 ， 选 择 复 制 (copy) 命令 后 ， 页 面 中 弹出 了 警 
告 提 示 框 “禁止 复制 网 页 内 容 ! ”。 那 么 ， 刚刚 的 复制 操作 到 底 成 功 没 有 呢 ? 我 们 可 以 通过 “ 草 切 
板 ” 来 查看 ， 具 体 效果 如 图 9.9 所 示 。 


ClipboardX 


2 Login 
Items 0 


1/12/2019 10:44:52 AM oncopy="alert( 禁 止 复 制 网 页 内 容 !");return false;" 
TEXT, RTF 

41 Bytes 

DESKTOP-O6U2936 

20190112104452.xml 


上 面 是 Windows10 剪贴 板 中 的 内 容 。 
可 以 看 到 其 中 仍 是 之 前 复制 的 代码 ， 刚 
刚 尝 试 复制 的 网 页 内 容 并 没有 被 复制 |。 


图 9.9 通过 “剪贴 板 ” 碍 看 复制 的 内 容 


如 图 9.9 中 标识 所 示 ， 刚 刚 答 试 复制 的 网 页 内 容 并 没有 成 功 ，“ 剪 切 板 ”中 的 最 近 内 容 仍 为 之 
前 复制 的 JavaScript 代码 。 


X 15 Windows 10 版 本 的 系统 中 没有 提供 剪贴 板 应 用 ( 带 可 视 化 窗口 ) ， 读 者 需要 自行 


O 下载 第 三 方 的 免费 应 用 。 
提 示 


9.10 屏 菩 选择 操作 


屏蔽 网 页 中 的 复制 功能 ， 看 起 来 似乎 有 点 烦琐 。 其 实 ， 通 过 JavaScript 脚本 语言 可 以 直接 屏 牙 
网 页 中 的 选择 操作 (通过 拖 动 鼠标 选择 ) 。 无 法 选择 ， 也 就 无 法 复制 了 。 在 网 页 中 屏蔽 选择 操作 ， 
可 以 通过 监听 onselectstart 事件 来 实现 。 在 本 节 中 ， 将 介绍 一 个 如 何 通过 JavaScript 实现 屏蔽 网 页 
选择 操作 的 代码 实例 。 
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【代码 9-11】( 详 见 源 代码 目录 ch09-js-html-forbidden-select.html 文件 ) 


01 <script type="text/javascript"> 

02 document.onselectstart = function (e) { 
03 e.returnValue - false; 

04 }; 

05 «/scrinb 


关于 【代码 9-11】 的 说 明 : 


e 第 02~04 行 代码 定义 了 监听 Document 对 象 中 开始 选择 onselectstart 事件 的 方法 函数 
e 第 03 行 代码 通过 设 定 Event 对 象 的 returnValue 属性 值 为 否 (false) 来 实现 屏蔽 选择 的 操作 。 


如 果 在 网 页 中 屏蔽 了 选择 操作 ， 即 使 用 户 通 过 拖 动 鼠标 进行 选择 ， 最 终 也 是 无 法 选取 任何 文 
本 内 容 的 。 


9.11 防止 网 页 被 “frame 


总 有 一 些 无 展 的 设计 人 员 ， 喜 欢 直 接 通 套 C "frame" ) 他 人 的 页 和 面 到 自己 的 网 站 中 。 而 且 ， 
这 样 做 的 成 本 是 非 第 低 的 ， 直 接 通 过 <iframe> 框 染 引 用 目标 网 址 就 可 以 实现 。 为 了 防止 目 己 的 页 面 
被 别人 “frame”， 可 以 在 页 面 中 骨 入 一 段 JavaScript 脚本 ， 用 于 检测 当前 页 面 是 不 是 顶层 (top) 
窗口 ， 假 如 检测 出 不 是 项 层 (top 窗口 ， 就 通过 脚本 语言 修改 过 来 。 这 样 ， 当 别人 “frame” 你 的 
网 页 时 ， 就 会 目 动 转 癌 你 的 网 页 了 ， 而 不 是 被 对 方 “frame” 到 他 们 的 网 页 中 。 

在 本 节 中 ， 将 介绍 一 个 如 何 通过 JavaScript 实现 屏蔽 网 页 选择 操作 的 代码 实例 。 


【代码 9-12】( 详 见 源 代码 目录 ch09-js-html-forbidden-frame.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 


<!-- 添加 文档 主体 内 容 --> 
«header» 

«nav»JavaScript 网 页 特效 - 防止 网 页 被 “frame”</nav> 
</header> 
</body> 
<script type-"text/javascript"» 


window.onload = function () { 


// TODO: 判断 有 没有 frame 


if (top.location !- self.location) { 
alert (" 网 页 被 “frame” [!"); 


top.location = self.location; 


) else ( 
console.log ("网 页 未 被 “frame”!")， 


}; 
«/script» 
«/html» 


关于 【代码 9-12】 的 说 明 : 

e 第 16~21 行 代码 通过 让 条 件 语句 判断 当前 窗口 对 得 (self) 是 否 为 顶层 窗口 (top ) 框架 。 如 
果 判 断 结 果 为 tue， 就 表示 当前 窗口 未 被 “frame”; 如 果 判 断 结 果 为 false， 就 表示 当前 窗口 
已 经 被 “frame” 了 ， 此 时 可 通过 第 18 行 代码 将 当前 窗口 跳出 到 顶层 窗口 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.10 所 示 。 

JavaScript 全 程 实 例 


œŒ © localhost wo Ww» 


JavaScript 网 页 特效 - 防止 网 页 被 “frame” 
—  — —————  —————————X N 
[Ww  Llinspecor EJ Console » B] = x 


Ú Y Filter output [ ]Persist Logs 
网 页 未 被 ‘frame?! _orbidden-frame.html:48:13 
» | 


图 9.10 JavaScript 实现 防止 网 页 被 “frame” (一 ) 


如 图 9.10 中 第 头 所 示 ， 浏 览 器 控制 台中 提示 “网 页 未 被 “frame”” 信 息 。 网 页 被 “frame” 
又 是 什么 效果 呢 ? 下 面 看 一 个 网 页 被 “frame” 后 通过 JavaScript 跳出 “frame” 的 代码 实例 。 


【代码 9-13】( 详 见 源 代码 目录 ch09-js-html-forbidden-frame-test.html 文件 ) 


<!doctype html» 
«html lang="en"> 
<head> 


<!-- 添加 文档 头 部 内 容 --> 


«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 


<nav>JavaScript 网 页 特效 - 防止 网 页 被 “frame” 测 试 </nav> 
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</header> 
<!-- 添加 文档 主体 内 容 --> 


<div id="id-div-center" style=""> 


<iframe src="ch09-js-html-forbidden-frame.html"></iframe> 
</div> 
</body> 
</html> 


关于 【代码 9-13】 的 说 明 : 

o 第 14 行 代码 通过 <iframe src="ch09-js-html-forbidden-frame.html"> 标 签 元 素 将 【代码 9-12】 定 
义 的 HTML 页 面 “frame” 进 来 了 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 9.11 所 示 。 
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JavaScript 网 页 特效 - 防止 网 页 被 “frame” 测 试 


Javascript 网 页 特效 - 防止 网 
页 被 “frame” 


被 "fame "进来 的 页 面 
NM ERES 
图 9.11 JavaScript 实现 防止 网 页 被 “frame” (二 ) 


如 图 9.11 中 第 尖 和 标识 所 示 ， 左 边 页 面 中 显示 了 “网 页 被 “frame” 了 ! ”的 警告 弹出 框 。 在 
将 警告 弹出 框 关 闭 后 ， 右 边 页 面 显示 网 页 被 “frame” 了 的 效果 。 我 们 知道 ，【 代 码 9-12】 中 定义 
的 第 18 行 代码 防止 了 页 面 (ch09-js-html-forbidden-frame.html) 被 “frame”。 因 此 。 图 9.11 中 右 
边 的 页 面 很 快 会 跳出 并 变 成 被 “frame” 的 页 面 ， 如 图 9.12 所 示 。 


JavaScript 全 程 实例 X 
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图 9.12 JavaScript 实现 防止 网 页 被 “frame” (三 ) 


9.12 ”隐藏 页 面 滚动 条 


在 默认 情况 下 ， 当 页 和 面 中 的 内 容 超过 窗口 边界 时 ， 会 自动 显示 出 深 动 条 〈 横 回 和 竖 同 〉 的 效 
R, 但 是 , 一 般 设 计 人 员 是 不 希望 页 和 面 出 现 深 动 条 的 (尤其 是 横 癌 深 动 条 ) ， 这 时 就 需要 将 深 动 条 
Edu. CSS 层 登 样式 表 中 提供 了 一 个 overflow 属性 ， 用 于 设置 当 内 容 洲 出 元 系 边 界 时 如 何 处 理 。 
在 本 节 中 ， 将 介绍 一 个 如 何 通 过 JavaScript 操作 overflow 属性 来 实现 隐藏 页 面 滚动 条 的 代码 实例 。 


【代码 9-14】( 详 见 源 代码 目录 ch09-js-html-hidden-scrollbar.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 
09 «header» 
10 «nav»JavaScript 网 页 特效 - 隐藏 页 面 滚动 条 </nav> 
11 «/header» 
12 «!-- 添加 文档 主体 内 容 --> 
13 «div id-"id-div-center" style=""> 
14 <span> 隐 藏 页 面 滚 动 条 </span> 
15 «input type="radio" id-"id-scrollbar-1" value-"1" 
onclick-2"sbCheck (this.id)"> 人 允许 页 面 滚 动 条 
16 «input type-"radio" id-"id-scrollbar-0" Value="0" 
onclicke"sbCheck (this .id)"> 隐 藏 页 面 滚 动 条 


1g -fdiw 

18 «/body» 

19 «script type-"text/javascript"» 

20 window.onload = function()í 

21 document.getElementById('id-scrollbar-1').checked = true; 
22 }; 

23 function on scrollbar check(thisid) 1 

24 var c = document.getElementById (thisid).value; 
25 switch(c) ( 

26 case TOT: 

27 // TODO: 隐藏 且 禁 用 横向 纵向 两 个 滚动 条 

28 document.body.style.overflow = "hidden"; 
29 break; 

30 case "l1": 


31 // TODO: 开启 横向 纵向 两 个 滚动 条 
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32 document.body.style.overflow - "auto"; 
33 break; 
34 l 


35 } 
36 «/script» 
37 «/html» 


关于 【代码 9-14】 的 说 明 : 

e 第 15~16 行 代码 通过 <inputtype="radio"> 标 签 元 素 定义 了 一 组 (两 个 ) 单 选 按钮 ， 并 添加 了 
单 击 onclick 事件 方法 (sbCheck() )， 分 别 用 于 执行 选择 显示 或 隐藏 页 面 滚动 条 的 操作 .。 

o 第 23~35 行 代码 是 单 击 onclick 事件 方法 (sbCheck() ) 的 实现 过 程 。 其 中 ， 第 28 行 和 第 32 
行 代码 分 别 根据 用 户 的 选择 ,通过 设 定 overflow 属性 值 实现 显示 ("auto" ) 或 隐藏 ("hidden") 
滚动 条 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.13 所 示 。 
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图 9.13 JavaScript 实现 隐藏 页 面 滚动 条 


如 图 9.13 中 篆 头 所 示 ， 左 边 页 面 中 是 默认 显示 滚动 条 的 效果 ， 右 边 页 面 中 是 隐藏 滚动 条 的 效 
果 。 男 外 ， 用 户 在 左边 页 面 是 可 以 通过 鼠标 操作 深 动 条 的 ， 而 在 右边 页 面 是 无 法 进行 深 动 的 。 


9.13 最 小 化 、 最 大 化 和 关闭 窗口 


在 某 些 情况 下 ,需要 将 新 打开 的 窗口 以 最 小 化 或 最 大 化 的 方式 显示 出 来 。 HTML DOM 中 提供 
了 一 个 resizeTo() 方 法 ， 可 以 按照 指定 的 窗口 尺寸 进行 调整 。 男 外 ， 如 果 需 要 关闭 窗口 ， 可 以 通过 
close() 方 法 来 实现 。 

下 面 介 绍 一 个 如 何 通过 JavaScript 实现 以 最 小 化 和 最 大 化 方式 打开 窗口 以 及 关闭 窗口 操作 的 
代码 实例 。 


【代码 9-15】( 详 见 源 代码 目录 ch09-js-html-min-max-close.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript 网 页 特效 - 最 小 化 、 最 大 化 和 关闭 窗口 </nav> 
11 </header> 

12 <!-- 添加 文档 主体 内 容 --> 


13 «div id-"id-div-center" style=""> 


14 «input type="button" value=" 最 小 化 窗口 " onclick-"window min()"/»«br»«br» 
15 «input type="button" value=" 最 大 化 窗口 " onclick="window max()"/»«br»«br» 
16 «input type="button" value=" 关 闭 窗口 "onclick="window close()"/><br><br> 
17 «/div» 

18 </body> 

19 «script type-"text/javascript"» 

20 var win; // TODO: define global window obj 

21 function window min() { 

22 win = window.open("open.html", "", " blank","width-350, 


height-300"); 


23 win.focus(); 

24 var w = 1, h= 1; 

25 win.resizeTo(w, h); 

26 } 

21 function window max() { 

28 win = window.open("open.html", "", " blank", "width=350, 
height-300"); 

29 win.focus(); 

30 var w = 0, h= 0; 

34 w — window.screen.availWidth; 

32 h = window.screen.availHeight; 

33 win.moveTo(0, 0); 

34 win.resizeTo(w, h); 

3 } 

36 function window close() { 

37 win.focus(); 

38 win.close(); 


Hy } 
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40 </script> 
41 </html> 


关于 【代码 9-15】 的 说 明 : 

e 第 20 行 代码 定义 了 一 个 全 局 变量 (win )， 用 于 保存 通过 window.open() 方 法 打开 的 窗口 对 象 。 

e 第 21~26 行 代码 定义 的 单 击 onclick 事件 方法 (window min0 ) 用 于 实现 以 最 小 化 的 方式 打 
开 窗 口 的 操作 。 其 中 ， 第 22 行 代码 通过 window.open() 方 法 打开 本 地 open.html 页 面 ， 并 定义 
了 窗口 的 打开 方式 (" blank" ) 和 初始 化 尺寸 ("width=350,height=300" ); 第 24 行 代码 定义 了 
最 小 化 窗口 的 尺寸 (w=1,h=1 ); 第 25 行 代码 通过 调用 resizeTo() 方 法 以 最 小 化 方式 重新 调整 
新 打开 的 open.html 页 面 。 

e 第 27~35 行 代码 定义 的 单 击 onclick 事件 方法 (window max() ) 用 于 实现 以 最 大 化 的 方式 打 
开 窗 口 的 操作 。 其 中 , 第 28 行 代码 通过 window.open() 方 法 打开 本 地 open.html 页 面 ( 同 第 22 
行 代码 ); 第 31 行 和 第 32 行 代 码 通 过 Screen 对 象 的 availWidth 属性 和 availHeight 属性 获取 
了 设备 屏幕 的 可 用 尺寸 ; 第 33 行 代码 通过 调用 moveTo() 方 法 将 open.html 页 面 窗口 移动 到 屏 
幕 原点 (0，0); 第 34 行 代 码 通过 调用 resizeTo() 方 法 以 最 大 化 ( 屏幕 可 用 尺寸 ) 方式 重新 调 
整 该 窗口 尺寸 。 

e 第 36~39 行 代码 定义 的 单 击 onclick 事件 方法 (window close() ) 用 于 实现 关闭 窗口 的 操作 ， 
主要 是 通过 第 38 行 代 码 调用 的 close() 方 法 来 实现 的 。 


9.14 脚本 永 不 出 错 


如 果 加 入 HTML. 页 面 中 的 JavaScript 脚本 存在 错误 ， 那 么 在 页 面 打开 运行 过 程 中 可 能 会 出 现 
用 户 并 不 硕 望 看 到 的 提示 脚本 错误 的 弹出 对 话 框 ， 这 是 一 种 不 太 友好 的 JavaScript 语言 设计 方式 。 
为 避免 这 种 情况 ， 可 以 在 网 页 中 通过 使 用 onerror 事件 方法 来 添加 捕获 错误 的 代码 ， 理 想 情 况 下 是 
可 以 让 JavaScript 脚本 永 不 出 错 。 下 和 面 ， 我 们 就 介绍 一 个 如 何 通过 JavaScript 实现 脚本 永 不 出 错 的 
代码 实例 。 


【代码 9-16】( 详 见 源 代码 目录 ch09-js-html-onerror.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实 例 </tit1le> 

</head> 

«body» 

<!-- 添加 文档 主体 内 容 --> 

«header» 


«nav»JavaScript 网 页 特效 - 脚本 永 不 出 错 </nav> 


11 «/header» 

12 «!-- 添加 文档 主体 内 容 --» 

13 «div id-"id-div-center" style=""> 

14 «input type="button" id-"id-input-error" value=" 测 试 错误 捕获 " 


onclick-2"testErr();"/» 


IN xrfdiw 
16 </body> 
17 «script type-"text/javascript"» 


18 window.onload = function (ev) { 
19 window.onerror = function (msg, url, line) ( 
20 console.log (msg); 

Pad console.log(url); 

22 console.log (line); 

23 // TODO: 屏蔽 脚本 错误 提示 
24 return true; 

29 

26 }; 

21 function testErr() { 

28 aaalert (" 测 试 错误 捕获 ") ; 

29 } 

30 «/script» 

31 «/html» 


关于 【代码 9-16】 的 说 明 : 
e 第 14 行 代 码 通 过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方法 
( testErr() )。 

e 第 27~29 行 代 码 是 单 击 onclick 事件 方法 (testErr( ) 的 实现 过 程 。 其 中 ， 第 28 行 代码 定义 
了 弹出 警告 框 ， 但 是 alert() 方 法 名 写 错 了 ( 写成 aaalert() 了 )， 目 的 就 是 人 为 制造 出 一 个 脚本 
错误 ， 用 于 测试 错误 捕获 。 

@ 关键 代码 是 第 19~25 行 定义 的 错误 捕获 onerror 事件 方法 ， 该 方法 中 的 三 个 参数 分 别 表示 错 
误 信 息 (msg )、 错 误 地 址 (url) 和 错误 代码 行 数 (line )。 第 24 行 代码 定义 的 返回 值 (true) 
是 屏蔽 脚本 错误 提示 的 关键 。 下 面 我 们 将 分 别 测试 一 下 有 无 定义 该 行 代码 的 不 同 结果 。 


使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 (这 里 先 注释 掉 第 24 行 代 码 ), 具体 效果 如 图 9.14 
所 示 。 

如 图 9.14 中 箭头 所 示 ， 浏 览 器 控制 台中 分 别 显示 了 错误 信息 、 错 误 地 址 和 错误 代码 行 数 ， 并 
以 显著 的 方式 给 出 了 钳 误 提示 。 

下 面 继续 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 (这 里 恢复 第 24 行 代 码 ) ， 上 有 具体 效果 如 
图 9.15 所 示 。 

如 图 9.15 中 所 示 ， 浏 览 器 控制 台中 分 别 显示 了 错误 信息 、 错 误 地 址 和 错误 代码 行 数 ， 但 并 没 
有 给 出 如 图 9.14 中 的 错误 提示 ， 说 明 脚本 错误 提示 被 屏蔽 掉 了 。 
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Javascript 网 页 特效 - 脚本 永 不 出 错 


v 
[Ww  CJinspector Œ Console (CO Debugger {} StyleEditor » 站 X 


Ú WW Filter output [ ]Persist Logs 


ReferenceError: aaalert is not defined che9-3s-html-onerror.html1:51:13 


http: //LocaLhost:63342/js -totalL -sampLes che9-3s-html-onerror.html:52:13 
/ch89/ch89- js-htmL - 
onerror.htmL? ijt-slhsastva71vv2i8j7vLvi16ao9 


63 ches-3s-html-onerror.html:53:13 
Q) > ReferenceError: aaalert is not defined [Learn ch88-3s-html-onerror.html:63:9 


More | : EE 
错误 提示 


图 9.14 JavaScript 实现 脚本 永 不 出 错 (一 ) 


JavaScript 全 程 实例 


> Œ | © localhost:63342/js-total-s -= » 


JavaScript 网 页 特效 - 脚本 永 不 出 错 


[RW  Llinspector EJ Console (CO Debugger » B] x 
WM Y Fiteroutput [Persist Logs 


ReferenceError: aaalert is not defined ches-3s-html-onerror.htm1:51:13 


http: //LocalLhost:63342/js-total -sampLes ches-3s-html-onerror.htm1:52:13 
/ch89/ch89- js-htmL - 

onerror.htmL? ijt-slhsastva71vv2i8j7vl v16ao9 

63 ches-3s-html-onerror.html1:53:13 


9.15 JavaScript 实现 脚本 永 不 出 错 (二 ) 
9.15 ”获取 浏览 器 信息 


省 大 主流 浏览 器 的 开发 商 在 设计 浏览 器 时 均 会 提供 关于 浏览 器 内 核 、 类 型 、 代 码 名 称 、 版 本 
号 、 语 言 等 方面 的 信息 。 如 果 想 获取 这 些 信 息 ， 通 过 使 用 Navigator 对 象 就 可 以 实现 。 下 面 ， 我 们 
介绍 一 个 如 何 通过 JavaScript 实现 获取 浏览 器 信息 的 代码 实例 。 


【代码 9-17】( 详 见 源 代码 目录 ch09-js-html-get-browser-info.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 «body» 


08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript 网 页 特效 - 获取 浏览 器 信息 </nav> 
11 «/header» 

12 «!-- 添加 文档 主体 内 容 --> 


13 «div id-"id-div-center" style=""> 


14 <span id-"id-span-browser-info"»«/span» 

15 </div> 

16 «/body» 

17 «script type-"text/javascript"» 

18 window.onload = function () { 

19 var browser info = "<b> 浏 览 器 主要 信息 :</b>" + "<br>"; 

20 browser info += "浏览 器 代码 名 称 : " + navigator.appCodeName + "<br>"; 

2T browser info += "浏览 器 类 型 : " + navigator.appName + "<br>"; 

22 browser info += "浏览 器 内 核 : " + navigator.userAgent + "<br>"; 

browser info += "浏览 器 版 本 : " + navigator.appVersion + "<br>"; 

24 browser info += "浏览 器 语言 : " navigator.language + "<br><br>"; 

295 browser info += "<b> 浏 览 器 全 部 信息 :</b>" + "<br>"; 

26 for (var n in navigator) { 

2 if (typeof navigator[n] == "string") 

28 browser info En * " : " * navigator[n] + "«br»"; 

29 } 

30 document .getElementById ("id-span-browser-info").innerHTML = 
browser info; 

31 }; 

32 </script> 

33 «/html» 


关于 【代码 9-17】 的 说 明 : 


e 第 20-24 行 代码 通过 Navigator 对 象 的 一 组 重要 属性 ， 分 别 获取 浏览 器 代码 名 称 
( appCodeName ). 浏览 器 类 型 (appName )、 浏 览 器 内 核 (userAgent), 浏览 器 版 本 ( app Version ) 
和 浏览 器 语言 (language ) 这 几 个 主要 信息 。 
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e 第 26~29 行 代码 通过 for 循环 迭代 语句 ， 遍 历 了 Navigator 对 象 中 全 部 字符 类 型 的 属性 ， 相 
当 于 获取 了 关于 浏览 器 的 全 部 重要 信息 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.16 所 示 。 

如 图 9.16 rPür3k rz, userAgent 属性 中 包含 了 关于 浏览 器 内 核 的 重要 信息 ， 因 此 设计 人 员 在 
编写 浏 贤 器 莱 容 性 测试 代码 时 主要 就 是 依据 userAgent 属性 。 

这 里 需要 读者 特别 注意 的 是 ，Navigator 对 象 是 属于 HTML BOM ( 浏 贤 嚣 对象 模 型 ) 范畴 的 。 
我 们 都 知道 BOM 并 不 是 正式 的 W3C 标准 , 因此 获取 的 浏览 髓 信息 均 是 浏览 髓 开发 商 目 己 定 义 的 ， 
并 不 是 标准 化 信息 。 


El] JavaScript 全 程 实例 x BE 


^ eq © localhost63342/]s-total-s. 


JavaScript 网 页 特效 - 获取 浏览 器 信息 


DER E SERES: 
浏览 器 代码 名 称 : Mozilla 


浏览 器 类 型 : Netscape 
浏览 嚣 内核 ; Mozilla/5.0 (Windows NT 10.0; rv:65.0) Gecko/20100101 Firefox/65.0 
浏览 器 版 本 : 5.0 (Windows) 

S: en-US 


WARLA: 
doNotTrack : 1 

oscpu : Windows NT 10.0 
vendor : 

vendorSub : 

productSub : 20100101 
buildID : 20181001000000 
appCodeName : Mozilla 
appName ; Netscape 
appVersion : 5.0 (Windows) 
platform : Win32 
userAgent : Mozilla/5.0 (Windows NT 10.0; rv:65.0) Gecko/20100101 Firefox/65.0 
product : Gecko 

language : en-US 


图 9.16 JavaScript 实现 获取 浏览 器 信息 
9.16 获取 浏览 器 窗口 尺寸 


本 节 我 们 介绍 如 何 获 取 浏 览 器 窗口 的 大 小 尺寸 (宽度 和 高 度 ) ， 特 别 区 分 了 浏览 器 窗口 的 整 
体外 部 尺寸 和 内 部 可 视 化 尺寸 。 下 面 介绍 一 个 如 何 通过 JavaScript 实现 获取 浏览 器 窗口 尺寸 的 代码 
实例 。 

【代码 9-18] 详 见 源 代码 目录 ch09-js-html-get-window-size.html 文件 ) 


<!doctype html» 
«html lang-"en"» 


«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 


06 </head> 

07 <body> 

08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript 网 页 特效 - 获取 浏览 器 窗口 尺寸 </nav> 
11 </header> 

12 «!-- 添加 文档 主体 内 容 --> 


13 «div id-"id-div-center" style=""> 


14 <span id-"id-span-window-size"»«/span» 

15 «/div» 

16 «/body» 

17 «script type-"text/javascript"» 

18 window.onload = function () { 

19 var s info = "<b> 浏 览 器 窗口 尺寸 :</b>" + "<br><br>"; 

20 var w outer size = getWindowOuterSize(); 

zx s info += "window.outerWidth: " + w outer size.width +" / "十 
"window.outerHeight: " + w outer size.height + "<br>"; 

22 var w inner size = getWindowInnerSize(); 

23 s info += "window.innerWidth: " + w inner size.width +" /" + 
"wWindow.innerHeight: " + w inner size.height + "<br><br>"; 

24 document.getElementById ("id-span-window-size").innerHTML = s info; 

25 }; 

26 function getWindowOuterSize() { 

27 return { 

28 width: window.outerWidth, 

29 height: window.outerHeight 

30 i; 

31 } 

32 function getWindowInnerSize() { 

33 return { 

34 width: window.innerWidth || document.documentElement.clientWidth, 

mo height: window.innerHeight || document.documentElement. 

clientHeight 

36 }; 

31 } 

38 «/script» 

39 «/html» 


关于 【代码 9-18】 的 说 明 : 


e 第 26-31 行 代码 定义 的 自 定义 方法 getWindowOuterSize() 用 于 获取 浏览 器 窗口 整体 外 部 尺 
寸 ， 这 里 使 用 了 Window 对 和 象 的 outerWidth 属性 和 outerHeight 属性 。 
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e 第 32~37 行 代码 定义 的 自 定义 方法 getWindowInnerSize0 用 于 获取 浏览 器 窗口 内 部 可 视 化 尺 
寸 , 这 里 使 用 了 Window 对 象 的 innerWidth 属性 和 innerHeight 属性 .同时 ,还 使 用 了 Document 
对 象 的 clientWidth 属性 和 clientHeight 属性 ， 主 要 是 用 来 保证 早期 下 浏览 器 版 本 的 兼容 性 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 9.17 所 示 。 
十 


口 JavaScript 全 程 实例 


JavaScript 全 程 实例 X 


C | © localhost63342/js- evr » GC © localhost:63342 TE E y 


JavaScript 网 页 特效 - 获取 浏览 器 窗口 尺寸 JavaScript 网 页 特效 - 获取 浏览 器 窗口 尺寸 


浏览 器 窗口 尺寸: 浏览 需 窗 口 尺 寸 : 


window.outerWidth: 489 / window.outerHeight: 352 window.outerWidth: 450 / window.outerHeight: 310 
window.innerWidth: 477 / window.innerHeight: 271 window.innerWidth: 438 / window.innerHeight: 229 


mm 调整 浏览 器 窗口 大 小 后 的 尺寸 变化 EE 


9.17 JavaScript 实现 获取 浏览 器 窗口 尺寸 


9.17 屏 敬 键盘 功能 键 


本 节 我 们 介绍 如 何在 浏览 器 窗口 中 屏蔽 功能 键 ， 主要 测试 Shift、Ctrl 和 Alt 这 三 个 功能 键 。 下 
和 耐看 一 下 具体 的 JavaScript 代码 实例 。 


【代码 9-19】( 详 见 源 代码 目录 ch09-js-html-forbidden-fkey.html 文件 ) 


01 <script type="text/javascript"> 

02 window.onload = function (ev) { 

03 document .onkeydown = function (ev) { 
04 var event = ev || window.event; 
05 if (event.shiftKey) { 

06 alert ("禁止 按 Shift 键 !") ; 

07 return false; 

08 ) else if (event.ctrlKey) ( 

09 alert ("禁止 按 Ctrl 8&1"); 

10 return false; 

IT } else if (event.altKey) { 

12 alert ("禁止 按 Alt 8&1") ; 

13 return false; 

14 } else {} 

I" console.log(event.key); 

16 


17 }; 
18 </script> 


关于 【代码 9-19】 的 说 明 : 

e 第 03~16 行 代码 通过 监听 Document 对 象 的 键盘 按键 onkeydown 事件 判断 用 户 是 否 按 下 了 
Shift ( event.shiftKey ). Ctrl ( event.ctrlKey ) 和 Alt (event.altKey ) 这 三 个 功能 键 ， 然 后 通过 
return 返回 值 (false ) 屏蔽 这 三 个 功能 键 。 其 中 ， 第 15 行 代码 增加 了 一 行 控 制 台 的 输出 信息 ， 
用 于 记录 用 户 的 按键 操作 (event.key ) 过 程 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 9.18 所 示 。 


JavaScript 全 程 实例 x |* - n | Dl Javascript 全 程 实例 


€ > G © localhost63342/js-! -Jr o» 


JavaScript 网 页 特效 - 屏蔽 键盘 功能 键 (Shift|Alt|CtrD) 
[W O Inspector [ŒJ Console DD Debugger » d]. x 


B Yy Filter output [ ]Persist Logs 


-html-forbidden-fkey.html1:54:13 Go——— 
-html -forbidden-fkey.html:54:13 [R C inspector CI Console D Debugger » d] x 


-html-forbidden-fkey.html:54:13 | W Wf Filter output [ ]Persist Logs 
.html-forbidden-fkey.html:54:13 a -html-forbidden-fkey.html:54:13 ^ 
.html-forbidden-fkey.html:54:13 t -htnl-forbidden-fkey.html :54:13 v 


9.18 JavaScript 实现 屏蔽 键盘 功能 键 


如 图 9.18 中 所 示 ， 在 左边 页 面 的 浏览 需 控 制 台 中 显示 了 用 户 操作 的 一 些 按键 信息 ， 在 右边 页 
面 中 演示 了 当 用 户 符 试 按 下 Ctrl + C 功能 键 进行 复制 操作 后 的 效果 (Ctrl BERES) 。 


9.18 ”页 面 窗口 动画 缩放 


本 节 我 们 将 实现 一 个 让 页 面 窗口 动画 缩放 的 功能 ， 主 要 是 通过 Window 对 象 的 resizeBy0 方 法 
按照 设 定 的 时 间 间 隅 动态 调整 窗口 尺寸 , 达到 页 面 窗 口 慢 慢 放 大 和 缩小 的 效果 。 下 面 看 一 下 具体 的 
JavaScript 代码 实例 。 


【代码 9-20】( 详 见 源 代码 目录 ch09-js-html-window-ani-size.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 


«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
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08 «!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 «nav»JavaScript 网 页 特效 - 页 面 窗 口 动画 缩放 </nav> 
11 «/header» 

12 «!-- 添加 文档 主体 内 容 --» 

13 «div id-"id-div-center" style=""> 


14 设 定 缩放 尺寸 : &nbsp; &nbsp; 


15 <input type="text" id-"id-input-size" Value=""/> 
16 «input type="button" value=" 动 画 放 大 窗口 " 
onclick="ani large('id-input-size');"/» 
T3 «input type="button" value=" 动 画 缩小 窗口 " 
onclick-"ani small('id-input-size');"/» 
18 «/div» 
19 «/body» 
20 «script type-"text/javascript"» 
21 var timerLarge - null, timerSmall - null; 
22 var oWidth = 0, oHeight = 0; 
23 var scrWidth = screen.availWidth; 
24 var srcHeight - screen.availHeight; 
25 function ani large(thisid) { 
26 var size = document.getElementById(thisid).value; 
ZT var win = window.open("open.html", "", " blank", "width-350, 


height-300"); 


28 win.moveTo(0, 0); 

29 timerLarge = setInterval(function () { 

30 win.resizeBy(size, size); 

3 oWidth = win.outerWidth; 

32 oHeight = win.outerHeight; 

d win.location.reload(); 

34 if (oWidth >= scrWidth || oHeight >= srcHeight) { 

33 clearInterval(timerLarge); 

36 timerLarge = null; 

a } 

38 }， 1000); 

39 } 

40 function ani small(thisid) { 

41 var size - document.getElementById(thisid).value; 

42 var win - window.open("open.html", "", " blank", "width-600, 
height-450"); 

43 win.moveTo(0, 0); 

44 timerSmall = setInterval(function () { 

45 win.resizeBy(-size, -size); 

46 oWidth = win.outerWidth; 


47 oHeight = win.outerHeight; 


48 
49 
50 
sur 
52 
93 
54 


win.location = win.location; 
if (oWidth < 10 || oHeight < 10) í 


clearInterval(timerSmall); 


timerSmall = null; 
} 
} 1000); 
} 


n5 xfscripb» 
56 «/html» 


关于 【代码 9-20】 的 说 明 : 

o 第 15 行 代 码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 设置 窗口 动画 缩放 的 调整 尺寸 。 

e 第 16 行 和 第 17 行 代码 分 别 通过 <input> 标 签 元 素 定义 了 两 个 按钮 ， 一 个 用 于 动画 放大 窗口 

(ani large() )， 一 个 用 于 动画 缩小 窗口 (ani small() )。 

o 第 25-39 行 代码 是 ani large() 事 件 方法 的 实现 过 程 。 其 中 ， 第 29-38 行 代码 定义 了 一 个 计 
时 器 。 第 30 行 代 码 通过 调用 Window 对 象 的 resizeBy() 方 法 调整 页 面 窗口 尺寸 大 小 。 另 外 ， 
第 34~37 行 代码 通过 证 条 件 语 名 判断 调整 后 的 窗口 尺寸 是 否 超出 了 屏幕 可 用 尺寸 ， 如 果 超 
出 了 就 通过 清除 计时 器 停止 窗口 放大 操作 。 

e 第 40~54 行 代码 是 ani small( 事 件 方法 的 实现 过 程 ， 原 理 与 ani large0) 事 件 方法 类 似 ， 在 调 
整 后 的 窗口 尺寸 小 于 数值 10 后 停止 窗口 缩小 操作 。 


9.19 ”定时 关闭 页 面 


本 节 我 们 实现 一 个 定时 关闭 页 面 窗 口 的 功能 ， 具 体 方法 是 先 设 定 一 个 定时 器 ， 骨 通过 调用 


Window 对 象 的 close0 方 法 来 实现 关闭 页 面 窗口 的 操作 。 下 和 面 看 一 下 上 其 体 的 JavaScript 代码 实例 。 


【代码 9-21】( 详 见 源 代码 目录 ch09-js-html-time-close-window.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 


</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 定时 关闭 页 面 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 
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13 «div id-"id-div-center" style=""> 

14 设 定 定 时 关闭 窗口 时 间 : 

15 <input type="text" id="id-input-time" value=""/> 

16 <input type="button" value=" 定 时 关闭 页 面 " onclick="set_time_close 
('id-input-time');"/» 

17 </div> 

18 </body> 

19 «script type-"text/javascript"» 

20 var timer - null; 

21. var win = null; 

22 function set time close(id) { 

23 var t = document.getElementById(id).value; 

24 var timeClose - t || -1; 

23 if (timeClose != -1) { 


26 timer = setTimeout (function () { 


27 win = window.open ('', ' self', ''); 


28 win.close(); 

29 timer.clearTimeout(); 
30 ), timeClose); 

3l 

32 } 

33 </script> 

34 </html> 


关于 【代码 9-21】 的 说 明 : 

e 第 15 行 代 码 通过 <input> 标 签 元 素 定 义 了 一 个 文本 框 ， 用 于 设置 定时 关闭 页 面 的 延迟 时 长 。 

e 第 16 行 代码 通过 <inpuf> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 

(set time close() )， 用 于 执行 定时 关闭 页 面 的 操作 。 

e 第 22 ~32 行 代码 是 set time close() 事 件 方法 的 实现 过 程 。 其 中 ， 第 26-30 行 代 码 定 义 了 一 
个 计时 器 ， 先 在 第 27 行 代码 中 通过 调用 Window 对 象 的 open() 方 法 重新 打开 一 次 当前 页 面 ， 
再 在 第 28 行 代 码 中 通过 调用 Window 对 象 的 close() 方 法 关闭 页 面 . 当然 关闭 页 面 操作 是 在 定 
时 器 执行 完毕 后 才 完 成 的 。 


9.20 ”修改 浏览 器 标题 


本 节 我 们 介绍 一 下 如 何 修改 浏览 器 的 标题 (浏览 器 标题 是 通过 <title> 标 签 元 素 定 义 的 ) ， 通 过 
修改 Document 对 象 的 title 属性 就 可 以 完成 修改 浏览 器 标题 。 下 面 看 一 下 具体 的 JavaScript 代码 
实例 。 


【代码 9-22】( 详 见 源 代码 目录 ch09-js-html-time-close-window.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript 网 页 特效 - 修改 浏览 器 标题 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
新 的 浏览 器 标题 : 
<input type="text" id="id-input-title" value=""/> 
<input type="button" value=" 修 改 浏览 器 标题 " 
onclick="modifyTitle('id-input-title');"/> 
</div> 
</body> 
<script type="text/javascript"> 
/** 
* modify browser title 
* (param id 
Er 
function modifyTitle(id) ( 
var new title = document.getElementById (id).value; 
document.title - new title; 
t 
«/script» 
«/html» 


关于 【代码 9-22】 的 说 明 : 


o 第 15 行 代码 通过 <input> 标 签 元 素 定义 了 一 个 文本 框 ， 用 于 填写 新 的 (打算 修改 的 ) 浏览 器 
标题 。 
e 第 16 行 代 码 通过 <input> 标 签 元 素 定义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 处 理 方 法 
( modifyTitle() )， 用 于 执行 修改 浏览 器 标题 的 操作 。 
e 第 24~27 行 代码 是 modifyTitle() 事 件 方法 的 实现 过 程 ， 其 中 第 26 行 代 码 通过 修改 Document 
*] 5-0 title 属性 来 完成 修改 浏览 器 标题 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 9.19 所 示 。 
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> Q  ® localhost en» f > Q © localhost e] n» 


JavaScript 网 页 特效 - 修改 浏览 器 标题 JavaScript 网 页 特效 - 修改 浏览 器 标题 


新 的 浏览 器 标题 : | 新 的 浏览 器 标题 
修改 浏览 器 标题 


É9.19 JavaScript 实现 屏蔽 键盘 功能 键 


如 图 9.19 所 示 ， 左 边 页 面 中 的 浏览 需 标 题 为 初始 定义 的 ， 右 边 页 面 中 的 浏览 器 标题 为 用 户 修 
改 的 (“新 的 浏览 器 标题 ”) 。 


第 10 章 DIV+CSS 特效 


本 章 介绍 如 何 通过 JavaScript 来 实现 DIV 与 CSS OE RESRRO. 的 特效 ， 通 过 这 些 特 效 来 丰 
富 HTML 页 面 的 设计 手段 和 展示 效果 。 


10.1. DIV S E SHEER RALIS 


CSS (Cascading Style Sheets) 是 指 层 登 样式 表 ， 是 W3C 推出 的 格式 化 网 页 内 容 的 标准 技术 ， 
用 于 定义 HTML 元 素 的 显示 形式 。CSS 主要 包括 盒子 模型 、 列 表 模块 、 超 链接 方式 、 语 言 模块 、 
背景 和 边框 、 文 字 特 效 、 多 栏 布局 等 模块 。 

DIV (DIVision) 是 用 于 层 著 样式 表 中 的 定位 技术 ， 即 为 划分 (设计 人 员 更 习惯 称 为 “ 层 ”) 。 
TE HTML DOM 中 ，DIV 元 素 是 用 来 为 大 块 (block-level) 的 内 容 提 供 结 构 和 背景 的 容器 。 

对 于 HTML 网 页 布局 方式 的 演变 而 言 ，DIV+CSS 方式 是 最 新 、 最 流行 的 Web 设计 标准 。 该 
方式 与 传统 通过 表格 (table) 布局 定位 方式 的 显著 不 同 就 是 可 以 实现 网 页 页 面 内 容 与 表现 相 分 离 。 
DIV+CSS 方式 使 得 页 面 结构 更 加 清晰 、 膛 辑 更 加 合理 、 代 码 也 更 加 精简 ， 这 样 就 提高 了 页 面 的 访 
问 速度 ， 并 增强 了 用 户 体验 效果 。 

通过 JavaScript 脚本 语言 ， 可 以 针对 DIV+CSS 进行 编程 设计 ， 实 现 多 种 多 样 的 页 面 特效 。 后 
面 将 为 读者 介绍 一 些 DIV+CSS 特效 的 代码 实例 。 


10.2 同时 改变 多 个 DOM 样式 


前 文中 提 到 ，DIV+CSS 方式 的 显著 特点 束 是 将 网 页 内 容 与 表现 相 分 离 。 简 单 来 讲 ， 就 是 页 面 
中 可 能 有 多 个 DOM 内 容 是 同一 类 型 属性 的 ， 可 以 使 用 DIV 元 素 设计 在 同一 个 “ 层 ” 内 ， 并 使 用 
相对 应 的 CSS 样式 进行 表现 。 这 样 ， 当 我 们 修改 CSS 样式 时 ， 就 会 同时 改变 多 个 DOM WAR 
样式 。 

下 面 介 绍 一 个 通过 JavaScript 实现 同时 改变 多 个 DOM 样式 的 代码 实例 。 


【代码 10-1】( 详 见 源 代码 目录 ch10-js-html-divcss-dom.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 


<!-- 添加 文档 头 部 内 容 --> 
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«title»JavaScript 全 程 实 例 </tit1le> 
</head> 
«body» 
«1-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript 网 页 特效 - 同时 改变 多 个 DoM 的 样式 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
<p> 第 一 段 内 容 . . .</p> 
<p> 第 二 段 内 容 . . .</p> 
<p> 第 三 段 内 容 . . .</p> 
«input type="button" onclick="changeFont (20);" value=" 大 字体 "/> 


«input type="button" onclick="changeFont (14);" value=" 正 常 字体 "/> 
«input type="button" onclick-"changeFont(8);" value=" 小 字体 "/> 
«/div» 
</body> 
<script type="text/javascript"> 


function changeFont (size) { 
var fontSize = size * 'px'; 
var ps = document.getElementsByTagName('p'); 
for (var i2» 0; i «€ ps.length; Irt] f 
ps[i].style.fontSize - fontSize; 


«/script» 
«/html» 


关于 【代码 10-1】 的 说 明 : 

e $ 14-16 行 代码 通过 <p> 标 签 元 素 定 义 了 一 组 段落 ， 后 面 将 通过 JavaScript 脚本 同时 改变 这 
一 组 段落 文本 的 字体 大 小 。 

e 第 17-19 行 代 码 通 过 <input> 标 签 元 素 定义 了 一 组 按钮 ， 并 定义 了 单 击 onclick 事件 方法 

( changeFont() )， 用 于 执行 改变 字体 大 小 的 操作 。 

e 第 23~29 行 代码 是 changeFont() 方 法 的 实现 过 程 。 其中， 第 25 行 代码 先 获取 了 全 部 <p> 标 签 
元 素 的 对 象 集合 ， 第 26 ~ 28 行 代码 通过 for 循环 迭代 语句 遍历 全 部 <p> 标 签 元 素 ， 通 过 第 27 
行 代码 修改 Style zF 2:4 fontSize 属性 来 改变 <p> 标 签 元 素 内容 的 字体 大 小 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 10.1 所 示 。 

如 图 10.1 第 头 和 标识 所 示 ， 左 边 页 面 中 为 初始 正常 字体 的 效果 ， 右 边 页 面 中 为 改变 到 大 字体 

的 效果 。 读 者 可 以 目 行 测试 一 下 改变 为 小 字体 的 效果 。 
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E] Javascript 全 程 实例 x | 十 - o E] Javascript SRSA x | 十 - o 
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图 10.1 JavaScript 实现 同时 改变 多 个 DOM 样式 (一 ) 


读者 可 以 注意 到 ，【 代 码 10-1】 是 通过 逐个 修改 DOM 对 象 的 Style 属性 来 完成 改变 样式 的 。 
其 实 ， 还 有 一 种 更 灵活 的 方式 ， 束 是 通过 修改 样式 类 名 〈className) 实现 统一 改变 相关 DOM 对 
象 的 样式 。 下 面 看 一 个 具体 的 JavaScript 代码 实例 。 


【代码 10-2】( 详 见 源 代码 目录 ch10-js-html-divcss-dom-className.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<style type="text/css"> 

.content-small { 
font-style: italic; 
font-size: small; 

} 

.content-medium { 
font-style: normal; 
font-size: medium; 

} 

.content-large { 
font-style: italic; 


font-size: large; 


} 
«/style» 
«body» 
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<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 
«p class="content-medium"> 这 里 是 第 一 段 . . .</p> 
«p class="content-medium"> 这 里 是 第 二 段 . . .</p> 
«p class="content-medium"> 这 里 是 第 三 段 . . .</p> 
«input type="button" onclick-2"changeClass('content-small');" 
value-"Small 风格 "/> 
«input type="button" onclick-"changeClass ('content-medium');" 
value-"Medium 风格 "/> 
«input type="button" onclick-"changeClass('content-large');" 
value-"Large 风格 "/> 
«/div» 
</body> 
<script type="text/javascript"> 
function changeClass(s) { 
var contents - document.getElementsByTagName('p'); 
for (var 1 = 0; i < contents.length; i-**) f 


contents[i].className = s; 


} 
«/script» 
«/html» 


关于 【代码 10-2】 的 说 明 : 


o 这 段 代码 比较 特殊 的 地 方 就 是 , 第 08~11 行 (.content-small)、 第 12~15 行 (.content-medium ) 
和 第 16~19 行 ( .content-large ) 代码 定义 的 CSS 样式 代码 ， 分 别 定义 了 三 种 风格 样式 的 文本 
字体 。 

e 第 24-26 行 代 码 通过 <p> 标 签 元 素 定义 了 一 组 段落 ， 注 意 增加 了 class 类 名 属性 的 定义 

( "content-medium" ), 
e 第 27-29 行 代码 通过 <input> 标 签 元 素 定 义 了 一 组 按钮 ， 并 定义 了 单 击 onclick 事件 方法 
(changeClass() )， 用 于 执行 改变 字体 大 小 的 操作 。 

e 第 33 ~38 行 代码 是 changeClass() 方 法 的 实现 过 程 。 其 中 ， 第 34 行 代码 先 获取 了 全 部 <p> 标 
签 元 素 的 对 象 集合 ， 然 后 第 3$ ~ 37 行 代码 通过 for 循环 迭代 语句 遍历 全 部 <p> 标 签 元 素 ， 通 
过 第 36 行 代码 修改 className 属性 值 来 改变 <p> 标 签 元 素 内 容 的 字体 样式 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 10.2 所 示 。 
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10.2 JavaScript 实现 同时 改变 多 个 DOM 样式 (二) 


10.3 弹出 层 


所 谓 弹出 层 ,， 就 是 指 通 过 DIV+CSS 来 模拟 实现 一 个 弹出 窗口 (这 并 不 是 一 个 真正 意义 的 传统 
Window 对 象 弹 出 窗口 ) 。 弹 出 层 的 应 用 场景 非常 多 ， 可 以 模拟 消息 框 、 警 告 杠 、 确 认 杠 等。 而且 
由 于 弹出 层 的 可 编程 性 很 强 , 可 以 设计 出 来 各 种 各 样 的 风格 效果 , 因此 在 很 多 流行 的 前 闯 框 杂 中 已 
经 用 其 取代 了 传统 弹出 窗口 的 功能 。 

下 面 介 绍 如 何 通 过 JavaScript 脚本 语言 来 实现 一 个 很 简单 的 、 只 市 关闭 按钮 的 弹出 层 的 代码 
实例 。 


【代码 10-3】( 详 见 源 代码 目录 ch10-js-html-divcss-popup.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 
«style type="text/css"> 
divfid-div-popup í( 
display: none; 
width: 300px; 
height: 100px; 
border: 1px solid fecc: 
text-align: center; 


font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif; 


} 
«/style» 
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17 «body» 

18 «!-- 添加 文档 主体 内 容 --> 

19 <header> 

20 «nav»JavaScript DIV+CSS 特效 - 弹出 层 </nav> 
21 </header> 

22 <!-- 添加 文档 主体 内 容 --> 

23 «div id-"id-div-popup"» 


24 <p><input type="button" id-'id-input-popupClose' value-'close'/»«/p» 

25 <p> 这 是 一 个 弹出 层 !</p> 

26 «/div» 

27 «input type="button" id-'id-input-popupOpen' value-'3ÉHi'/» 

28 «/body» 

29 «script type-"text/javascript"» 

30 window.onload = function () { 

31 function setCss( this, cssOption) ( // TODO: 设置 元 素 样式 

32 // TODO: 判断 节点 类 型 

33 if (! this || this.nodeType --- || this.nodeType === 
|| ! this.style) ( 

34 return; 

32 } 

36 for (var cs in cssOption) f 

37  this.style[cs] = cssOption[cs]; 

38 } 

39 } 

40 function setPopup(e, openPop, closePop) { 

41 setCss(e, ( // TODO: 初始 化 样式 

42 "position": "absolute", 

43 "ZIndex": 100, 

44 "backgroundColor": "£eee" 

45 )); 

46 openPop.onclick = function () { 

47 e.style.display = "block"; 

48 setCss(e, ( 

49 "EOD": "SUST, 

50 i "BUS". 

51 "marginLeft": -e.offsetWidth / 2 + "px" 

52 133 

Sa }; 

54 closePop.onclick = function () { 

95 e.style.display = "none"; 

56 }; 

57 t 


58 setPopup( 
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99 document.getElementById ("id-div-popup"), 


60 document.getElementById ("id-input-popupOpen"), 
61 document.getElementById ("id-input-popupClose") 
62 ); 

63 }; 

64 </script> 

65 «/html» 


关于 【代码 10-3】 的 说 明 : 
e 第 23-26 行 代码 通过 <div> 标 签 元素 定 义 了 一 个 层 ， 其 中 第 24 行 代码 通过 <input 
id='id-input-popupClose 人 > 标签 元 素 定义 了 一 个 关闭 (close) 按钮 、 第 25 行 代 码 定义 了 一 段 文 
本 ， 我 们 用 这 个 设计 来 模拟 一 个 弹出 层 ， 
o 第 27 行 代码 通过 <input id='id-input-popupOpen'> 标 签 元 素 定义 了 一 个 按钮 ,用 于 激活 弹出 层 。 
第 31~ 39 行 代码 的 自 定义 方法 setCss() 用 于 设置 元 素 样式 ， 其 中 第 36 ~38 行 代码 通过 for 4f 
环 迁 代 语 名 将 全 部 样式 依次 设置 到 元 素 中 。 
e 第 40~57 行 代码 的 自 定义 方法 setPopup() 用 于 设置 弹出 层 ， 具 体内 容 如 下 。 
> 第 41~45 行 代码 调用 SetCss() 方 法 ， 将 元 素 的 position 属性 修改 为 absolute (绝对 定位 )， 
这 样 就 可 以 随意 在 整个 页 面 中 进行 定位 了 。 
> 第 46~52 行 代码 缚 定 了 <input id-'id-input-popupOpen^4z42 4] 4 click 事件 方法 。 其 中 ， 
第 47 行 代码 将 弹出 层 的 display 属性 值 改 为 block ( 可见 状 态 ); 第 48 ~ 52 行 代码 调用 
setCss() 方 法 设置 弹出 层 的 坐标 为 窗口 的 中 间 位 置 。 
> 5854-56 行 代码 绑 定 了 <input id='id-input-popupClose 作 按钮 的 单 击 click 事件 方法 ， 用 于 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 10.3 所 示 。 
tg JavaScript 全 程 实例 tg JavaScript 全 程 实例 


GG © localhost63342; v »». Ww» Q ®© localhost:63342 


JavaScript DIV+CSS 特 效 - 弹出 层 


.弹出 


图 10.3 JavaScript 实现 DIV+CSS 弹出 层 


如 图 10.3 中 第 头 和 标识 所 示 ， 单 击 左 边 页 面 中 的 “弹出 ”按钮 ， 弹 出 层 的 效果 如 右边 页 面 所 
示 ; 在 右边 页 面 中 单 击 “close ”按钮 ， 则 会 关闭 该 弹出 层 。 
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10.4 ”用 层 模拟 确认 框 


在 10.3 节 实 现 的 弹出 层 其 实 更 像 一 个 简单 的 弹出 式 消息 框 。 前 文中 我 们 也 提 到 了 ， 用 弹出 层 
还 可 以 模拟 出 稍微 复杂 一 些 的 确认 框 效果 。 下 和 面 介绍 一 个 通过 JavaScript 实现 用 层 模 拟 出 确认 框 效 
果 的 代码 实例 。 

【代码 10-4】( 详 见 源 代码 目录 ch10-js-html-divcss-prompt.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 «style type="text/css"> 

08 divsid-div-prompt { 

09 display: none; 

10 width: 300px; 

m height: 100px; 

12 border: lpx solid FCCC} 

13 text-align: center; 

14 font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif; 
TH } 

16 «/style» 

17 «body» 


18 «!-- 添加 文档 主体 内 容 --> 

19 «header» 

20 «nav»JavaScript DIV+CSS 特效 - 用 层 模 拟 确认 框 </nav> 
21 </header> 

22 <!-- 添加 文档 主体 内 容 --> 

23 «div id-'id-div-prompt' style=""> 

24 <p> 用 层 模拟 的 确认 框 ， 请 用 户 测 试 1</p> 


25 «p» 

26 «input type="button" id-'id-prompt-ok' value=' 确 认 '/> 

27 <input type="button" id='id-prompt-cancel' value=' 取 消 '/> 
28 </p> 

29 </div> 

30 <input type="button" id='id-prompt-open' value=' 弹 出 确认 框 '/> 

31 </body> 


32 «script type-"text/javascript"» 


33 window.onload = function () ( 


34 
29 
36 
37 
38 


39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 


50 
S 
52 
99 
54 
S9 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
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function div prompt(options) { 
var e = options.prompt, // TODO: 获取 元 素 
setCss = function ( this, cssOption) ( // TODO: 设置 元 素 样式 
// TODO: 判断 节点 类 型 
if (! this || this.nodeType === || 
 this.nodeType === || ! this.style)í 
return; 
} 
for (var cs in cssOption) i 
 this.style[cs] = cssOption[cs]; 
} 
return this; 
setCss(e, ( // TODO: 初始 化 基本 样式 

"position": "absolute", 

"zlIndex": 100; 

"Lop":((document.body.scrollTop || document. 
documentElement.scrollTop) + window.screen. 
availHeight / 2 - e.offsetHeight) + "px", 

"backgroundColor": "£eee" 

)); 
options.promptOpen.onclick = function () ( // TODO: 打开 确认 按钮 
e.style.display = "block"; 

setCss(e, ( // TODO: 设置 位 置 

"igfb": "BUS", 
"Loup"; T3037; 
"marginLeft": -e.offsetWidth / 2 + "px" 
)); 
}; 
options.promptOk.onclick = function () { // TODO: 确认 按钮 
e.style.display = "none";  // TODO: 隐藏 层 
if (options.okCallBack) options.okCallBack(); 
}; 
options.promptCancel.onclick = function () (  // TODO: 取消 按钮 
e.style.display = "none";  // TODO: 隐藏 层 
if (options.cancelCallBack) options.cancelCallBack(); 
}; 
} 
div prompt ({ 
"prompt": document .getElementById ("id-div-prompt"), 
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"promptOpen": document.getElementById("id-prompt-open"), 


"promptOk": document.getElementById ("id-prompt-ok"), 
"OkCallBack": function () f 
alert (" 确 认 的 回调 函数 ! ") ; 


), 

"promptCancel": document.getElementById ("id-prompt-cancel"), 

"cancelCallBack": function () { 

alert (" 取 消 的 回调 函数 ! ") ; 
} 
)); 
}; 

82 «</script> 
83 «/html» 


关于 【代码 10-4】 的 说 明 : 
e $ 23-29 行 代码 通过 <div> 标 签 元 素 定义 了 一 个 层 。 其中， 第 24 行 代码 定义 了 一 段 文本 ， 第 
26 行 代码 通过 <input id='id-prompt-ok 人 > 标签 元 系 定义 了 一 个 确认 按钮 ,第 27 行 代码 通过 <input 
id='id-prompt-cancel 人 > 标签 元 素 定义 了 一 个 取消 按钮 ， 这 样 用 层 设 计 来 模拟 出 一 个 确认 框 。 
e 第 30 行 代码 通过 <input id='id-prompt-open> 标 签 元 素 定义 了 一 个 按钮 ， 用 于 激活 确认 框 。 
e 第 34~ 68 行 代码 的 自 定义 方法 div promptO 实 现 用 层 模拟 出 来 的 确认 框 ， 具 体内 容 如 下 。 
> 第 36~45 行 代码 的 自 定 义 方法 setCss() 用 于 设置 元 素 样式 , 其 中 第 41 ~ 43 行 代 码 通过 for 
循环 迭代 语句 将 全 部 样式 依次 设置 到 元 素 中 、。 

> 第 46~51 行 代码 调用 setCss(0) 方 法 ， 将 元 素 的 position 属性 修改 为 absolute ( 绝对 定位 ), 
这 样 就 可 以 随意 在 整个 页 面 中 进行 定位 了 。 

> 第 $2~59 行 代码 缚 定 了 <input id-'id-prompt-open 4242.6 3- 3& click 事件 方法 , 第 53 行 代 
码 将 弹出 层 的 display 属性 值 改 为 block ( 可见 状态 )， 第 54 ~ 58 行 代码 调用 setCss() 方 法 
设置 弹出 层 的 坐标 为 窗口 的 中 间 位 置 。 

> 第 60~63 TRIDA T <input id=-'id-prompt-ok> 按 钮 的 单 击 click 事件 方法 ， 用 于 执行 确 


认 操 作 。 
> 第 64~67 行 代码 绑 定 了 <input id='id-prompt-cancel> 按 钮 的 单 击 click 事件 方法 , 用 于 执行 
取消 操作 。 
o 第 69 ~ 80 行 代码 通过 调用 div prompt() 自 定义 方法 并 设 定 相关 参数 ， 实 现 了 用 层 模拟 出 来 的 
确认 框 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 10.4 所 示 。 
如 图 10.4 中 第 头 所 示 ， 页 面 中 分 别 演示 了 用 层 模拟 确认 框 的 效果 ， 以 及 用 户 单 击 “ 确 认 ” 和 
“取消 ”后 执行 回调 函数 的 效果 。 
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€— > CQ © localhost63342 € -> QC! OQ localhost63342 zn Ww» 


JavaScript DIV+CS5 特 效 - 用 层 模 拟 确 认 框 JavaScript DIV+CSS 特 效 - 用 层 模 拟 确认 框 


弹出 确认 框 弹出 确认 框 


用 层 模拟 的 确认 框 , 请 用 户 测试 ! 用 层 模拟 的 确认 框 , 请 用 户 测试 ! 


确认 ” 取消 确认 | 取消 


ES JavaScript 全 程 实例 E JavaScript 全 程 实例 X 


十 一 口 x 
< > Q © localhost63342 € > @ © localhost63342 eu» z 


EV; ERR eA X! 


图 10.4 JavaScript 实现 用 层 模 拟 确认 框 


105 Bà x B 


在 HTML 网 页 设计 中 ， 对 于 层 (DIV) 的 使 用 是 非常 灵活 的 。 在 很 多 设计 场景 下 ， 需 要 层 在 
可 见 和 隐藏 两 种 状态 下 反复 切换 来 满足 实际 需求 ， 这 就 是 隐藏 层 的 舞台 了 。 一 般 ， 隐 藏 层 是 通过 设 
定 CSS 样式 的 Display 属性 (nonelblock) 实现 的 。 下 面 介 绍 一 个 通过 JavaScript 实现 隐藏 层 的 代码 
实例 。 


【代码 10-5】( 详 见 源 代码 目录 ch10-js-html-divcss-hidden.html 文件 ) 


<!doctype html» 

«html lang-"en"» 

<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 


</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript DIV+CSS 特效 - 隐藏 层 </nav> 
</header> 


<!-- 添加 文档 主体 内 容 --> 
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13 «div id-"id-div-hidden"» 
14 <p> 这 是 一 个 隐 茂 层 !</p> 
15 <p> 请 用 户 切换 “隐藏 /显示 ”效果 !</P> 
«/div» 
17 «input type="button" id-'id-input-hidden' value=' 隐 藏 上 面 的 层 '/> 
18 «input type="button" id-'id-input-show' value=' 显 示 隐 茂 层 ' /> 
19 </body> 
20 «script type="text/javascript"> 
window.onload = function () { 
22 document.getElementById("id-input-hidden").onclick = function () { 
Z3 document.getElementById ("id-div-hidden").style. 
display = "none"; // 隐藏 元 素 
2 }; 
2a document.getElementById("id-input-show").onclick = function 
26 document.getElementById("id-div-hidden").style. 
display = "block"; 
al }; 
28 }; 
29 «*€/scripb» 
30 «/html» 


关于 【代码 10-5】 的 说 明 : 

e 第 13~16 行 代码 通过 <div id="id-div-hidden"> 标 签 元 素 定义 了 一 个 层 ， 并 定义 了 一 些 文本 ， 
我 们 用 这 个 设计 来 模拟 一 个 隐藏 层 。 

e 第 17 行 和 第 18 行 代码 通过 <input> 标 签 元 素 定义 了 两 个 按钮 , 分别 用 于 执行 隐藏 和 显示 上 面 
第 13 ~ 16 行 代码 所 定义 隐藏 层 的 操作 。 

e 第 23 行 和 第 26 行 代 码 分 别 通过 设 定 层 (<div id-"id-div-hidden"» ) 的 Display 属性 值 ("none" 
表示 层 不 可 见 ; "block" 表 示 层 为 块 级 元 素 ， 也 就 是 可 见 的 ) 来 实现 隐藏 层 的 功能 。 


10.6 ”可 拖 动 的 层 


在 前 面 介绍 的 几 个 代码 实例 中 , 层 (DIV ) 都 是 位 置 固定 的 , 也 就 是 无 法 通过 鼠标 进行 拖 动 的 。 
而 在 实际 项 目 需求 中 , A DIV) 一 般 都 是 可 以 拖 动 的 ， 比 如 模拟 出 来 的 弹出 层 是 可 以 满足 用 户 拖 
动 改变 位 置 的 ,JavaScript 实现 可 拖 动 的 层 , 需要 对 鼠标 键 的 按 下 (MouseDown) 移动 (MouseMove) 
和 松 开 (MouseUp) 事件 进行 编程 ， 并 根据 鼠标 位 置 的 变化 计算 出 可 拖 动 层 的 新 位 置 。 下 面 介绍 一 
个 通过 JavaScript 实现 可 拖 动 层 的 代码 实例 。 
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【代码 10-6】( 详 见 源 代码 目录 ch10-js-html-divcss-draggable.html 文件 ) 


01 «!doctype html» 
02 «html lang-"en"» 


03 «head» 

04 «1-- 添加 文档 头 部 内 容 --> 

05 «title»JavaScript 全 程 实例 </title> 
06 </head> 

07 <body> 


08 <!-- 添加 文档 主体 内 容 --> 

09 <header> 

10 «nav»JavaScript DIV+CSS 特效 - 可 拖 动 的 层 </nav> 
11 </header> 

12 «!-- 添加 文档 主体 内 容 --> 


13 «div id="id-div-box" style=""> 


14 <h3 align="right" id="id-box-drag" style=""> 

15 «span style-"float:left; color:white;"> 标 题 栏 (鼠标 拖 动 ) </span> 
16 «/h3» 

13 «div id="id-box-msg"> 这 是 一 个 可 拖 动 的 层 !</div> 

18 «div id-"id-box-pos"»«/div» 

19 </div> 

20 «/body» 


21 «script type-"text/javascript"» 


22 var isDrag = false; // TODO: 是 否 正在 移动 的 标志 变量 


23 TI // TODO: left 变量 

24 var 七 = 0; // TODO: top 变量 

25 aie i x. wr 

26 window.onload = function (ev) { 

ag var boxDrag = document.getElementById('id-box-drag'); 

28 boxDrag.onmousedown = mouseDown; // TODO: WA mousedown 事件 
29 boxDrag.onmousemove = mouseMove; // TODO: WA mousemove 事件 
30 boxDrag.onmouseup = mouseUp; // TODO: WA mouseup 事件 
at var initPos - "X pos : 200 , Y pos : 100"; 

32 document.getElementById('id-box-pos').innerText = initPos; 

33 }; 

34 pt 

35 * 4E X box 的 鼠标 按 下 事件 

36 

31 function mouseDown (event) { 

38 var e = event; 

39 x = e.clientX; // TODO: 得 到 事件 发 生 的 x 坐标 

40 y = e.clientY; // TODO: 得 到 事件 发 生 的 y 坐标 


41 // TODO: 得 到 box 左上 角 的 坐标 
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42 
43 
44 
45 
46 
47 
48 
49 
50 
sii 
52 
SE 
54 
DS 
56 
2j 


58 
39 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
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= document.getElementById ("id-div-box").offsetLeft; 
t = document.getElementById ("id-div-box").offsetTop; 
isDrag - true; 
) 
/** 
* 4E X box 的 鼠标 移动 事件 
Ef 
function mouseMove (event) { 
if (isDrag) ( 
var e = event; 
var box = document.getElementById ("id-div-box"); 
var newLeft = 1 + e.clientX - x;  // TODO: 计算 新 的 left 的 值 
var newTop = t + e.clientY - y; // TODO: 计算 新 的 top 的 值 
var newPos = "X pos : "+ newLeft + ", Y pos : T + newTop; 
document.getElementById('id-box-pos').innerText - newPos; 
box.style.left = newLeft + "px"; 
// TODO: 设置 新 的 left 值 ， 带 上 单位 
box.style.top = newTop + "px"; // TODO: 设置 新 的 top 值 ， 带 上 单位 


* $E X. box 的 鼠标 按 下 释放 事件 
Er 


function mouseUp(event) { 


if (isDrag) ( 


isDrag = false; 


) 
«/script» 
</html> 


关于 【代码 10-6】 的 说 明 : 


e 第 13~19 行 代码 通过 <div id="id-div-box"> 标 签 元 素 定义 了 一 个 层 。 其 中 ， 第 14~16 行 代码 


通过 <h3> 标 签 元 素 定义 了 一 个 标题 栏 CS T ES). 第 17 ~ 18 行 代码 分 别 定义 了 一 行文 
本 和 一 个 空 行 用 于 显示 动态 坐标 。 我 们 用 这 个 设计 来 模拟 一 个 可 拖 动 的 层 。 


e 第 22 行 代码 定义 了 一 个 变量 (isDrag )， 是 用 于 表示 当前 状态 是 否 为 筷 标 正在 拖 动 的 一 个 标 


i24 
志 量 。 


e 第 37~45 行 代码 、 第 49 ~ 60 行 代码 和 第 64 ~ 68 RADARE T TÆ (<div 


id="id-div-box"> ) 的 筷 标 按 下 、 和 鼠标 移动 和 和 鼠标 按 下 释放 这 三 个 事件 方法 ， 通 过 计算 可 拖 动 
层 的 坐标 位 置 来 实现 层 的 拖 动 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 具体 效果 如 图 10.5 所 示 。 
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Gg JavaScript 全 程 实例 x 各 Javascript 全 程 实例 x |F E 口 x 


-Ig » 
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Œ © localhost63342/ Q | © localhost63342/ 


JavaScript DIV+CSS 特 效 - 可 拖 动 的 层 JavaScript DIV+CSS 特 效 - 可 拖 动 的 层 


可 拖 动 层 在 鼠标 拖 动 后 的 新 位 置 


标题 栏 (鼠标 拖 动 ) 


标题 栏 (鼠标 拖 动 ) 


这 是 一 个 可 拖 动 的 层 ! 
X pos : 200 , Y pos : 100 


可 拖 动 层 的 初始 位 置 


这 是 一 个 可 拖 动 的 层 ! 
X pos : 198, Y pos:168 


图 10.5 JavaScript 实现 可 拖 动 的 层 


如 图 10.5 中 的 标识 所 示 ， 左 边 页 面 中 显示 了 可 拖 动 层 的 初始 位 置 ， 右 边 页 面 中 显示 了 可 拖 动 
层 在 经 过 鼠标 拖 动 后 的 新 位 置 。 


10.7 ESRAR 


Pria. WEN f DRE ERVE R ffl P B5] 76 2 EREE A 03. D] EJ B DL TELS] CAR oo 
如 , 在 需要 实名 认证 的 网 页 中 会 弹出 一 个 提示 框 ， 要 求 用 户 填 写 认 证 信息 ， 如 果 用 户 不 填写 认证 信 
恩 就 通过 遮 单 的 形式 限制 用 户 操作 页 面 内 的 其 他 元 素 。 下 面 介 绍 一 个 通过 JavaScript 实现 遮 单 层 效 
果 的 代码 实例 。 


【代码 10-7】( 详 见 源 代码 目录 ch10-js-html-divcss-masklayer.html 文件 ) 


01 
02 
03 
04 
05 
06 
07 


09 
10 
LT 
12 
13 
14 
13 
16 
TI 


<!doctype html> 
<html lang="en"> 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 
«style type="text/css"> 
divsid-div-layer ( 
position: relative; 
width: 320px; 
height: 160px; 
border: lpx solid gray; 
margin: 32px auto; 
padding: 2px; 
font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif; 
} 
«/style» 
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18 «body» 

19 «!-- 添加 文档 主体 内 容 --» 

20 «header» 

21 «nav»JavaScript DIV4CSS 特效 - 遮 单 层 效 果 </nav> 
22 «/header» 

23 «!-- 添加 文档 主体 内 容 --> 

24 «div id-"id-div-layer" style=""> 


25 <p> 测 试 遮 墨 层 效 果 :</Pp> 


26 <p><input type="text"></p> 

2l <p><input type="button" value=" 提 交 "></p> 

28 «div id-'id-div-maskLayer' style-"display: none"></div> 
29 </div> 


30 «input type="button" value='! 显 示 遮 单 层 ' id-'id-input-showMaskLayer'/» 
31 «input type="button" value=!' 取 消 遮 单 层 ' id-'id-input-cancelMaskLayer'/» 
32 «input type="button" value=! 遮 单 全 部 页 面 !' id-'id-input-bodyMaskLayer'/» 
33 «div id-'id-div-bodyMaskLayer' style="display: none"»«/div» 

34 «/body» 

35 «script type-"text/javascript"» 


36 window.onload = function () { 
37 function setCss( this, cssOption) ( // TODO: 设置 元 素 样式 
38 // TODO: 判断 节点 类 型 
dg if (! this || this.nodeType === || this.nodeType --- 
|| ! this.style) I 
40 return; 
41 } 
42 for (var cs in cssOption) ( // TODO: 遍历 设置 样式 
43  this.style[cs] = cssOption[cs]; 
44 } 
45 return this; 
46 } 
47 document .getElementById ("id-input-showMaskLayer"). 
onclick = function () { 
48 var divLayer = document.getElementById("id-div-layer"), 
49 maskLayer = document.getElementById("id-div-maskLayer"); 
50 setCss(maskLayer, ( // TODO: 初始 化 遮 重 的 样式 
9d "position": "absolute", 
92 "display": "block", 
23 "lett": "UÜpx", 
54 "top": "Hipx* 
55 "ZIndex": 1000, 
56 "backgroundColor": meci"; 


57 "height": divLayer.scrollHeight + "px", 


58 
59 
60 
61 
62 
63 


64 


65 
66 
67 


68 
69 
70 
T1 
72 
13 
74 


75 
76 


TI 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 


1 
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"width": divLayer.offsetWidth + "px", 
/ * AE Sb Du V, ORB EUR * / 
"filter": "alpha (Opacity-60)", 
oe "ELT. 
"-hoz-opacity": "0.6", 
"filter": "progid:DXImageTransform.Microsoft.Alpha 
(Opacity-60)", 
"-MS-filter": "progid:DXImageTransform.Microsoft.Alpha 
(Opacity-60)" 
H; 
t; 
document .getElementById ("id-input-cancelMaskLayer").onclick = 
function () i 
var divLayer = document.getElementById("id-div-layer"), 
maskLayer = document.getElementById("id-div-maskLayer"); 
setCss(maskLayer, ( // TODO: 初始 化 遮 音 的 样式 
"display": "none" 
)); 
}; 
document.getElementById("id-input-bodyMaskLayer").onclick = 
function () { 
var body = document.body.parentNode, 
maskLayer - document.getElementById 
("id-div-bodyMaskLayer"); 
setCss(maskLayer, { // TODO: 初始 化 遮盖 的 样式 
"position": "absolute", 
"display": "bliock", 
i THp", 
"Epp": "Upx", 
"ZIndex": 1000, 
"backgroundColor":; "foco", 
"height": body.scrollHeight + "px", 
"width": body.offsetWidth + "px", 
/ * IEEE EP DUE Ws B3 BH EUR * / 
"filter": "alpha (Opacity-60)", 
"üpdgbrEy": "0.6" 
"-moz-opacity": "0.6", 
"filter": "progid:DXImageTransform.Microsoft.Alpha 
(Opacity-60)", 
"-MS-filter": "progid:DXImageTransform.Microsoft.Alpha 
(Opacity-60)" 
)); 
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); 
}; 


«/script» 
«/html» 


关于 【代码 10-7】 的 说 明 : 
e 第 24~ 29 行 代码 通过 <div id="id-div-layer"> 标 签 元 素 定义 了 一 个 层 , 该 层 的 CSS 样式 定义 见 
第 08 ~ 16 行 代 码 。 其 中 ， 第 25 ~ 27 行 代码 定义 了 一 些 可 操作 的 元 素 ， 目 的 是 模拟 出 一 个 表 
单 内 容 ; 第 28 行 代码 通过 <div id-'id-div-maskLayer> 标 签 元 素 定 义 了 一 个 遮 单 层 ， 这 里 注意 
一 下 Style 样式 中 display 属性 (none) 的 使 用 。 我 们 通过 这 样 的 设计 来 实现 遮 章 层 的 效果 。 
e 第 33 行 代码 通过 <div id-'id-div-bodyMaskLayer^4$ AAZ 3L T 3 —/ EXE, 53] —/ iE X. 
Æ («div id-'id-div-maskLayer^ ) 不 同 的 是 ， 通 过 这 个 遮 章 层 可 以 实现 整个 页 面 被 遮 音 的 效果 。 
o 第 37~ 46 行 代码 的 自 定义 方法 setCss(0) 用 于 设置 元 素 样式 ， 其 中 第 42 ~ 44 行 代码 通过 for 4 
环 和 迭代 语句 将 全 部 样式 依次 设置 到 元 素 中 。 
o 第 47~ 66 行 代码 定义 的 事件 处 理 方法 实现 了 层 (<div id-"id-div-layer"» ) 的 庶 罩 效果 ， 有 具体 
内 容 如 下 。 
> 第 52 行 代码 将 遮 踢 层 (<div id-'id-div-maskLayer'» ) 的 display 属性 值 改 为 block ( 可 见 状 
态 )。 
> 第 51-58 行 代码 根据 层 («div id-"id-div-layer"» ) 的 宽 高 尺寸 重新 计算 了 遮 单 层 (<div 
id='id-div-maskLayer> ) 的 宽 高 尺寸 。 
> 第 60~64 行 代码 定义 了 兼容 各 种 浏览 器 的 透明 层 效 果 。 
e 第 74~94 行 代码 定义 的 事件 处 理 方法 实现 了 整个 页 面 的 遮 罩 效果 。 注 意 ， 第 75 行 代码 获取 


的 是 body 对 象 的 父 元 素 节点 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 10.6 和 图 10.7 所 示 。 
t9. JavaScript 全 程 实例 x | 十 = o B JavaScript 全 程 实例 x + 一 口 
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测试 遮 军 层 歼 果 : 
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如 图 10.6 IR, AARP oz F7 E DOSCRABOES SR »— AR P Sez S 73 RE DS RGB 
遮 单 的 效果 。 
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); 
}; 


«/script» 
«/html» 


关于 【代码 10-7】 的 说 明 : 
e 第 24~ 29 行 代码 通过 <div id="id-div-layer"> 标 签 元 素 定义 了 一 个 层 , 该 层 的 CSS 样式 定义 见 
第 08 ~ 16 行 代 码 。 其 中 ， 第 25 ~ 27 行 代码 定义 了 一 些 可 操作 的 元 素 ， 目 的 是 模拟 出 一 个 表 
单 内 容 ; 第 28 行 代码 通过 <div id-'id-div-maskLayer> 标 签 元 素 定 义 了 一 个 遮 单 层 ， 这 里 注意 
一 下 Style 样式 中 display 属性 (none) 的 使 用 。 我 们 通过 这 样 的 设计 来 实现 遮 章 层 的 效果 。 
e 第 33 行 代码 通过 <div id-'id-div-bodyMaskLayer^4$ AAZ 3L T 3 —/ EXE, 53] —/ iE X. 
Æ («div id-'id-div-maskLayer^ ) 不 同 的 是 ， 通 过 这 个 遮 章 层 可 以 实现 整个 页 面 被 遮 音 的 效果 。 
o 第 37~ 46 行 代码 的 自 定义 方法 setCss(0) 用 于 设置 元 素 样式 ， 其 中 第 42 ~ 44 行 代码 通过 for 4 
环 和 迭代 语句 将 全 部 样式 依次 设置 到 元 素 中 。 
o 第 47~ 66 行 代码 定义 的 事件 处 理 方法 实现 了 层 (<div id-"id-div-layer"» ) 的 庶 罩 效果 ， 有 具体 
内 容 如 下 。 
> 第 52 行 代码 将 遮 踢 层 (<div id-'id-div-maskLayer'» ) 的 display 属性 值 改 为 block ( 可 见 状 
态 )。 
> 第 51-58 行 代码 根据 层 («div id-"id-div-layer"» ) 的 宽 高 尺寸 重新 计算 了 遮 单 层 (<div 
id='id-div-maskLayer> ) 的 宽 高 尺寸 。 
> 第 60~64 行 代码 定义 了 兼容 各 种 浏览 器 的 透明 层 效 果 。 
e 第 74~94 行 代码 定义 的 事件 处 理 方法 实现 了 整个 页 面 的 遮 罩 效果 。 注 意 ， 第 75 行 代码 获取 


的 是 body 对 象 的 父 元 素 节点 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 10.6 和 图 10.7 所 示 。 
t9. JavaScript 全 程 实例 x | 十 = o B JavaScript 全 程 实例 x + 一 口 


C © localhost:63342/ ze €» Œ © localhost:63342/ egy» 
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测试 遮 军 层 歼 果 : 


i 
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10.6 JavaScript KIVE SZ ACR. (一 ) 


如 图 10.6 IR, AARP oz F7 E DOSCRABOES SR »— AR P Sez S 73 RE DS RGB 
遮 单 的 效果 。 
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059 


JavaScript Vue-- React 全 程 实例 


top: Opx; 

z-index: 1; 

width: 320px; 

height: 64px; 

padding: 32px 8px l6px 8px; 
border: 1px solid #aaa; 
color: 4333; 
background-color: #eee; 

} 

ftabSwitch ( 
position: relative; 
float: left; 
z-index: 2; 
margin: Opx; 
top: Ipa; 
bottom: Opx; 
font-size: l4px; 
text-align: center; 
cursor: pointer; 

} 

#tabSwitch div ( 
padding: 8px; 
border: lpx solid f£ccc; 
border-bottom: none; 
background-color: #fff; 

} 

#tabSwitch div.on { 
border: lpx solid #aaa; 
border-bottom: none; 
background-color: #eee; 

} 

«/style» 
«body» 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript DIV4CSS 特效 - Tab 选项 卡 </nav> 
«/header» 
«1-- 添加 文档 主体 内 容 --> 
«div id-"id-div-center" style=""> 

«div class-"tabSwitchParent"» 

<!-- 选 项 卡 --> 


«div id-'tabSwitch'» 
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064 
065 
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077 
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079 
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081 
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$510 DIV«CSS 特效 | 


«div data-target-'tabSwitchl' class-"on"»JavaScript«/div» 


«div data-target-'tabSwitch2'»jQuery«/div» 
«div data-target-'tabSwitch3'»NodeJS«/div» 


«/div» 
<!-- 内 容 --> 


«div class-"tabSwitchTarget" style-"display: block;" 


欢迎 您 学 习 《JavaScript 全 程 实例 》 
</div> 
<!-- 内 容 --> 


id-'tabSwitchl'» 


«div class-"tabSwitchTarget" style-"" id-'tabSwitch2'» 


欢迎 您 学 习 《jQuery 全 程 实例 》 
«/div» 
<!-- 内 容 --> 


«div class-"tabSwitchTarget" style-"" id-'tabSwitch3'» 


欢迎 您 学 习 《NodeJS 全 程 实例 》 
«/div» 
«/div» 
«/div» 
</body> 
<script type="text/javascript"> 


window.onload = function () { 


function getTypeElement(es, type) ( // 获 取 指 定 类 型 的 节点 


var esLen = es.length, 
i = 0, 
eArr = [], 
esI = null; 
for (; i «€ esLen; i*t*) f 
esI = es[i]; 


if (esI.nodeName.replace("4", ""), 


toLocaleLowerCase() === 


eArr.push(esI); 


) 


return eArr; 


] 
function tabSwitch(e) { 


var divs - getTypeElement (e.childNodes, "div"), 


l = divs.length, 
1 = 0? 
es G a 


divs[i].onclick = function () { 


// 单 击 切换 按钮 


type) { 
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100 for (var ii = 0; ii < l; iit*) í 

101 divs[ii].className = ""; // 删 除 选项 卡 的 边框 

102 document.getElementById("tabSwitch" + (ii + 1)).style. 
display = "none"; 


103 } 


104 this.className = "on"; // 设 置 当 前 元 素 的 选中 样式 
105 document.getElementById(this.getAttribute ("data-target")). 


style.display - "block"; 
106 
107 
108 } 
109 tabSwitch (document.getElementById("tabSwitch")); //Tab 选项 卡 切换 
110 } ; 
111 «/script» 
112 «/html» 


关于 【代码 10-8】 的 说 明 : 


e 第 057~076 行 代码 通过 一 组 <div> 标 签 元 系 定义 了 一 个 Tab 控件 。 其 中 , 第 058 ~ 063 行 代码 
定义 了 一 组 Tab 选项 卡 ， 第 064~075 行 代码 定义 了 Tab 选项 卡 所 对 应 的 Tab 选项 内 容 。 

e 第 099~103 行 代码 为 第 057 ~ 076 行 代码 定义 的 一 组 Tab 选项 卡 分 别 缚 定 了 单 击 onclick 事件 。 
当 单 击 Tab 选项 卡 标签 时 , 修改 被 单 击 元 素 的 样式 为 选中 状态 ， 其 他 元 素 修改 为 未 选中 状态 ， 
在 被 选中 的 元 素 节 点 上 获取 将 要 显示 的 选项 内 容 id， 将 所 有 的 选项 内 容 隐 藏 ， 即 

“display="none"”， 然 后 显示 选取 内 容 的 对 象 ， 设 置 样式 “display="block"”。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 10.8 所 示 。 


B JavaScript SEIA x 十 一 O0 X g JavaScript SEIA x 十 一 o 


Q! © localhost Zn «o» tz Q © localhost ego» 


JavaScript DIV+CSS 特 效 - Tab 选 项 卡 JavaScript DIV+CSS 特 效 - Tab 选 项 卡 


切换 Tab 选 项 卡 
e Tab 选 项 内 容 | à; Tab 选 项 内 容 
JavaScript | jQuery NodeJS JavaScript | jQuery | NodeJS 


欢迎 您 学 习 《JavaScript 全 程 实例 》 欢迎 您 学 习 和 jQuery 全 程 实例 》 


图 10.8 JavaScript 实现 Tab 选项 卡 


如 图 10.8 中 的 标识 所 示 ， 左 边 页 和 面 中 显示 了 “JavaScript”Tab 选项 卡 的 内 容 ， 右 边 页 面 中 显 
示 了 切换 到 “jQuery”Tab 选项 卡 的 内 容 。 


$11% Ajax 应 用 


本 章 介 绍 如 何 通 过 Ajax 技术 来 实现 HTML 网 页 的 应 用 开发 ， 通 过 这 些 应 用 来 丰富 HTML 页 
面 的 设计 手段 和 展示 效果 。 


11.1 Ajax 概述 


Ajax (Asynchronous JavaScript and XML) 即 异 步 的 JavaScript 和 XML， 是 指 一 种 创建 交互 式 
网 页 应 用 的 前 端 开 发 技术 。 这 里 特别 需要 强调 的 是 ，Ajax 不 是 一 门 全 新 的 编程 语言 ， 而 是 指 一 种 
前 端 开发 新 方法 ， 这 是 大 多 数 初 学 者 特别 容易 混 消 的 概念 。 

Ajax 技术 的 特点 就 是 前 问 页 面 与 后 台 服 务 器 进行 数据 交互 的 全 新 方式 ， 通 过 核心 的 
XMLHttpRequest 对 象 在 无 须 重 新 加 载 整 个 网 页 的 情况 下 ， 可 以 实现 独立 更 新 网 页 中 的 局 部 内 容 。 
而 传统 的 网 页 如 果 需 要 更 新 内 容 ， 则 必须 重 载 整个 网 页 页 面 才 可 以 实现 。 所 以 ，Ajax 会 被 设计 人 
员 定 义 为 “异步 方式 的 JavaScript 和 XML 技术 ”。 

由 于 Ajax 技术 依赖 于 浏览 器 的 JavaScript 和 XML， 因 此 浏览 器 的 兼容 性 和 支持 程度 也 就 和 
JavaScript 运行 时 的 性 能 一 样 章 要 了 ， 还 好 这 对 于 如 今 绝 大 多 数 的 主流 浏览 器 (Google Chrome, 
FireFox, Opera. Apple Safari、 微 软 的 IE 系列 和 Microsoft Edge 等 ) 均 不 是 问题 了 。Ajax 技术 不 
需要 额外 安装 任何 浏览 器 插件 ， 只 要 用 户 在 浏览 器 中 允许 JavaScript 脚本 执行 权限 即 可 ， 这 也 是 
Ajax 技术 非常 受 欢 迎 的 主要 原因 之 一 。 

通过 Ajax 技术 ， 可 以 实现 很 多 种 Web 前 端 开发 的 特效 。 后 面 将 为 读者 介绍 一 些 和 常用 的 Ajax 
技术 应 用 。 


11.2 Ajax 基础 


Ajax 技术 的 基础 就 是 对 核心 对 象 XMLHttpRequest 的 使 用 ， 如 今 绝 大 多 数 的 主流 浏览 器 均 文 
FF XMLHttpRequest 对 象 〈 不 过 早期 微软 的 IE5 和 IE6 浏览 器 使 用 的 是 ActiveXObject 对 象 ) 。 

对 于 Google Chrome、FireFox、Opera、Apple Safari、 微 软 IE7+ 系 列 和 Microsoft Edge 等 主流 
浏览 右 ， 内 核 中 已 经 内 建 了 XMLHttpRequest 对 象 ， 因 此 创建 XMLHttpRequest 对 象 的 语法 可 以 写 
成 如 下 形式 : 

Var xhr = new XMLHttpRequest(); 

// TODO: Chrome. FireFox. Opera. Safari. IE7*. Edge 
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而 对 于 老 版 本 的 IE5 和 IE6， 则 使 用 ActiveXObject 对 象 来 创建 : 
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); // TODO: IE5、IE6 
综 上 所 述 ， 为 了 更 好 地 编写 浏览 器 兼容 性 代码 〈 兼 容 绝 大 多 数 浏览 器 ) ， 可 以 先 检查 浏览 器 


ÆR XLIFF XMLHttpRequest 对 象 ， 如 果 文 持 就 创建 XMLHttpRequest 对 象 ， 如 果 不 文 持 就 创建 
ActiveXObject 对 象 ， 有 具体 的 写法 如 下 。 


【代码 11-1] 


01 var xhr = null;  // TODO: define XMLHttpRequest Object 
02 if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, IET7*, 
Edge, etc. 
xhr = new XMLHttpRequest (); 
} else if (window.ActiveXObject) { // TODO: IE5, IE6 
xhr = new ActiveXObject ("Microsoft.XMLHTTP"); 
) else ( 
xhr = null; 


关于 【代码 11-1】 的 说 明 : 


e 第 01 行 代码 定义 了 一 个 XMLHttpRequest 对 象 实例 (xhr ). 
e 第 02~08 行 代码 通过 让 条 件 语句 判断 浏览 器 类 型 ,并 根据 判断 结果 选择 创建 XMLHttpRequest 
对 象 的 方式 。 


在 XMLHttpRequest 对 象 (xhr) 创建 成 功 后 ， 就 可 以 回 服务 器 端 发 送 异 步 请 求 并 解析 异步 数 
据 了 ， 参 考 的 写法 如 下 。 


【代码 11-2】 


01 if (xhr = null) ( 

02 xhr.onreadystatechange - on state change; 
xhr.open("GET|POST", url, true); 
xhr.send (null); 


) else ( 
// TODO: XMLHttpRequest Object is invalid. 


关于 【代码 112] mi Sj: 


e 第 02 行 代码 通过 XMLHttpRequest 对 象 的 onreadystatechange 事件 ， 定 义 了 当 异 步 请 求 发 送 
到 服务 器 端 后 需要 执行 的 响应 任务 (相当 于 回调 方法 )。 

e 第 03 行 代码 通过 XMLHttpRequest 对 象 的 open() 方 法 定义 异步 请 求 的 参数 ，GETIPOST 规定 
了 请 求 的 类 型 ，URL 定义 了 请 求 的 链接 地 址 ，true 表示 为 异步 处 理 请 求 。 
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e 第 04 行 代码 通过 XMLHttpRequest 对 象 的 send() 方 法 执行 将 请 求 发 送 到 服务 器 端的 操作 。 另 
外 ， 如 果 该 方法 带 有 String 类 型 的 参数 (url 地 址 的 参数 集合 )， 则 代表 请 求 类 型 必须 为 POST 


11.3 Ajax 解析 文本 


通过 Ajax 技术 可 以 解析 多 种 关 型 的 数据 和 文件 ， 其 中 最 简单 、 最 基础 的 融 是 解析 文本 文件 。 
下 面 介绍 一 个 通过 Ajax 实现 解析 文本 操作 的 代码 实例 。 


【代码 11-3】( 详 见 源 代码 目录 ch11-js-ajax-txt.html 文件 ) 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Ajax MA] - 解析 txt 文本 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-ajax" style=""> 
«input type-"button" onclick-"ajax load txt request();" 
value=" 通 过 Ajax 解析 txt 文本 "/> 
<span> 解 析 文 本 内 容 :</span> 
<span id="id-span-ajax-txt"></span> 
</div> 
</body> 
<script type="text/javascript"> 
var xhr = null; // TODO: define XMLHttpRequest Object 
function ajax load txt request() { 
if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7+, Edge, etc. 
xhr = new XMLHttpRequest (); 
} else if (window.ActiveXObject) { // TODO: IE5, IE6 
xhr - new ActiveXObject ("Microsoft.XMLHTTP"); 
} else ( 


xhr = null; 
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29 if (xhr !- null) { 


30 xhr.onreadystatechange - on state change; 


31 xhr.open("GET", "ajax.txt", true); 

32 xhr.send (null); 

33 } else 1 

34 console.log("Your browser does not support XMLHTTP."); 
RT 

36 } 

37 function on state change() { 


38 if (xhr.readyState -- 4) { 

39 if (xhr.status == 200) f 

40 document.getElementById('id-span-ajax-txt').innerText - 
xhr.responseText; 

41 j eise i 

42 console.log("Problem retrieving data:" + xhr.statusText); 

43 

44 

45 

46 </script> 

47 «/html» 


关于 【代码 11-3】 的 说 明 : 
e 第 14 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 方法 
(ajax load txt request() )， 用 于 执行 Ajax 异步 解析 文本 文件 的 操作 。 
o 第 16 行 代码 通过 <span> 标 签 元 素 定义 了 一 块 行内 区 域 ， 用 于 显示 通过 Ajax 异步 方式 解析 文 
本 文件 所 获取 的 文本 内 容 。 
第 20 行 代 码 定 义 了 一 个 XMLHttpRequest 对 和 象 实 例 (xhr )， 并 初始 化 为 null。 
第 21 ~ 36 行 代码 是 ajax load txt request( 方 法 的 实现 过 程 ， 有 具体 内 容 如 下 : 
> 第 22~28 行 代码 用 于 创建 XMLHttpRequest 对 象 实例 ( 见 【 代 码 11-1】). 
> 第 29~35 行 代码 用 于 执行 Ajax 异步 请 求 操 作 ( 见 【 代 码 11-2〗)。 其 中 ， 第 30 行 代码 定 
义 了 回调 方法 (on state change() )， 第 31 行 代码 调用 的 open() 方 法 定义 了 异步 请 求 的 文 
本 文件 路 径 ， 为 本 地 的 文本 文件 ("ajax.txt" )。 
o 第 37~45 行 代码 是 on state change() 回 调 方 法 的 实现 过 程 ， 具 体内 容 如 下 : 
> 状态 值 readyState 属性 值 为 4， 表 示 响 应 内 容 解 析 完 成 。 
> RAA status 属性 值 为 200， 表 示 异 步 操作 成 功 。 
> XMLHttpRequest 对 象 的 responseText 属性 值 为 解析 后 获取 的 文本 文件 ("ajax.txt" ) 中 的 
内 容 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 11.1 所 示 。 
如 图 11.1 中 的 第 头 所 示 ， 右 边 页 和 面 中 显示 了 通过 Ajax 异步 方式 解析 文本 文件 C'ajax.txt"). 所 
得 到 的 内 容 。 
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(9 JavaScript SELA x 十 一 L1 时 Javascript SELA) X 


CQ! | (D localhost zn pes > Q © localhost v *-* Y» 


JavaScript Ajax 应 用 - 解析 txt 文 本 JavaScript Ajax 应 用 - 解析 txt 文 本 


通过 Ajax 解析 txt 又 本 


解析 文本 内 容 : Hello Ajax, This is from txt files! 


R 


图 11.1 Ajax 实现 解析 文本 
11.4 Ajax 解析 XML 


上 一 节 中 介绍 了 通过 Ajax 技术 解析 文本 文件 的 方法 ， 本 节 继 续 介绍 如 何 通过 Ajax 技术 解析 
XML 数据 的 方法 。 下 面 看 一 个 Ajax 解析 XML 文件 并 将 获取 的 数据 填充 到 表格 中 显示 的 代码 实例 。 


【代码 11-4】( 详 见 源 代码 目录 ch11-js-ajax-xml.html 文件 ) 


<!doctype html» 
<html lang="en"> 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
«1-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Ajax MH - 解析 XML 数据 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-ajax" style-""» 
«input type-"button" onclick-"ajax load xml request();" 
value=" 通 过 Ajax 解析 XML 数据 "/> 
«div id-"id-div-ajax-txt"»«/div» 
«div id-"id-div-ajax-xml"»«/div» 
«/div» 
«/body» 
«script type-"text/javascript"» 
var xhr = null; // TODO: define XMLHttpRequest Object 


function ajax load xml request() { 
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22 


23 
24 
25 
26 
21 
28 
29 
30 
31 
32 
Aa 
34 
dS 
36 
EX 
38 
39 
40 


41 
42 
43 


44 
45 
46 
47] 
48 
49 
50 
51 
52 
d 
54 
EET 
56 
Y] 
58 
29 
60 
61 
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if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7*, Edge, etc. 

xhr = new XMLHttpRequest (); 

) else if (window.ActiveXObject) ( // TODO: IE5, IE6 
xhr - new ActiveXObject ("Microsoft.XMLHTTP"); 

) else ( 
shr = null; 

} 

if (xhr !- null) ( 
xhr.onreadystatechange - on state change; 
xhr.open("GET", "ajax.xml", true); 
xhr.send (null); 

) else ( 


console.log("Your browser does not support XMLHTTP."); 


function on state change() { 


if (xhr.readyState -- 4) { 
if (xhr.status -- 200) { 
document.getElementById('id-div-ajax-txt'). 
innerText - xhr.responseText; 
var xmlDoc = xhr.responseXML; 
var x = xmlDoc.documentElement.getElementsByTagName ("WEB"); 
var v = "<table border-'1'»«tr»«th»Title«c/th»«th»Address«/th»«th» 
TEGAN rn 
var len = x.length; 
var xx = "": 
for (let 12 0; i« len; i**) i 
v t= "«tr»"; 
x[i].getElementsByTagName('TITLE'); 


XX 
{ 
LEV 
v += "<td>" + xx[0].firstChild.nodeValue + "</td>"; 
) catch (er) { 
uy p "ergo sh 


xx = x[i].getElementsByTagName ('ADDRESS') ; 


Ly 

v += "<td>" + xx[0].firstChild.nodeValue + "</td>"; 
) catch (er) í 

v += "<td> «/td»"; 
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62 

63 } 

64 xx = x[i].getElementsByTagName ('INFO'); 

65 { 

66 Ley 

67 v += "<td>" + xx[0].firstChild.nodeValue + "</td>"; 
68 ) catch (er) 1 

69 v += "<td> </td>"; 

70 

ral } 

72 v += "</tr>"; 

73 } 

74 v += "</table>"; 

75 document.getElementById('id-div-ajax-xml').innerHTML 
76 } else { 

7T] console.log("Problem retrieving data:" + xhr.statusText); 
78 

79 

80 

81 «/script» 

82 «/html» 


关于 【代码 11-4】 的 说 明 : 
e 第 14 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 方法 
(ajax load xml request() )， 用 于 执行 Ajax 异步 解析 XML 文件 的 操作 。 
e 第 15 行 代 码 通过 <div id="id-div-ajax-txt"> 标 签 元 素 定义 了 一 个 层 区 域 ， 用 于 显示 通过 Ajax 
异步 方式 解析 XML 文件 所 获取 的 文本 内 容 。 
o 第 16 行 代码 通过 <div id="id-div-ajax-xml"> 标 签 元 素 定 义 了 另 一 个 层 区 域 , 用 于 显示 通过 Ajax 
异步 方式 解析 XML 文件 后 将 所 获取 的 数据 填充 到 一 个 动态 生成 的 表格 。 
o 第 20 行 代码 定义 了 一 个 XMLHttpRequest 对 象 实例 (xhr)， 并 初始 化 为 null。 
e 第 21~36 行 代码 是 ajax load xml request() 方 法 的 实现 过 程 ， 有 具体 内 容 如 下 : 
> 第 22~28 行 代 码 用 于 创建 XMLHttpRequest 对 象 实例 ( 见 【 代 码 11-1]). 
> 第 29~35 行 代码 用 于 执行 Ajax 异步 请 求 操作 ( 见 【 代 码 11-2〗)。 其 中 ， 第 30 行 代码 定 
义 了 回调 方法 (on_state change() ), 第 31 行 代 码 调用 的 open() 方 法 定义 了 异步 请 求 的 XML 
文件 路 径 ， 为 本 地 的 XML 文件 ("ajax.xml" )。 
e 第 37~ 80 行 代码 是 on state change() 回 调 方法 的 实现 过 程 (参考 【代码 11-3】〗)， 需 要 介绍 的 
内 容 如 下 : 
> 第 40 行 代码 通过 XMLHttpRequest 对 象 的 responseText 属性 获取 了 解析 XML 文件 
("ajax.xml" ) 中 的 内 容 ， 并 通过 层 ( «div id="id-div-ajax-txt"> ) 元 素 进行 显示 .。 
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62 

63 } 

64 xx = x[i].getElementsByTagName ('INFO'); 

65 { 

66 Ley 

67 v += "<td>" + xx[0].firstChild.nodeValue + "</td>"; 
68 ) catch (er) 1 

69 v += "<td> </td>"; 

70 

ral } 

72 v += "</tr>"; 

73 } 

74 v += "</table>"; 

75 document.getElementById('id-div-ajax-xml').innerHTML 
76 } else { 

7T] console.log("Problem retrieving data:" + xhr.statusText); 
78 

79 

80 

81 «/script» 

82 «/html» 


关于 【代码 11-4】 的 说 明 : 
e 第 14 行 代码 通过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 方法 
(ajax load xml request() )， 用 于 执行 Ajax 异步 解析 XML 文件 的 操作 。 
e 第 15 行 代 码 通过 <div id="id-div-ajax-txt"> 标 签 元 素 定义 了 一 个 层 区 域 ， 用 于 显示 通过 Ajax 
异步 方式 解析 XML 文件 所 获取 的 文本 内 容 。 
o 第 16 行 代码 通过 <div id="id-div-ajax-xml"> 标 签 元 素 定 义 了 另 一 个 层 区 域 , 用 于 显示 通过 Ajax 
异步 方式 解析 XML 文件 后 将 所 获取 的 数据 填充 到 一 个 动态 生成 的 表格 。 
o 第 20 行 代码 定义 了 一 个 XMLHttpRequest 对 象 实例 (xhr)， 并 初始 化 为 null。 
e 第 21~36 行 代码 是 ajax load xml request() 方 法 的 实现 过 程 ， 有 具体 内 容 如 下 : 
> 第 22~28 行 代 码 用 于 创建 XMLHttpRequest 对 象 实例 ( 见 【 代 码 11-1]). 
> 第 29~35 行 代码 用 于 执行 Ajax 异步 请 求 操作 ( 见 【 代 码 11-2〗)。 其 中 ， 第 30 行 代码 定 
义 了 回调 方法 (on_state change() ), 第 31 行 代 码 调用 的 open() 方 法 定义 了 异步 请 求 的 XML 
文件 路 径 ， 为 本 地 的 XML 文件 ("ajax.xml" )。 
e 第 37~ 80 行 代码 是 on state change() 回 调 方法 的 实现 过 程 (参考 【代码 11-3】〗)， 需 要 介绍 的 
内 容 如 下 : 
> 第 40 行 代码 通过 XMLHttpRequest 对 象 的 responseText 属性 获取 了 解析 XML 文件 
("ajax.xml" ) 中 的 内 容 ， 并 通过 层 ( «div id="id-div-ajax-txt"> ) 元 素 进行 显示 .。 


05 
06 
07 
08 
09 
10 
11 
12 


«title»JavaScript 全 程 实例 </title> 


</head> 
<body> 


<!-- 添加 文档 主体 内 容 --> 


«header» 


«nav»JavaScript Ajax 应 用 - 解析 JSON 数据 </nav> 
</header> 
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«1-- 添加 文档 主体 内 容 --> 
«div id-"id-div-ajax" style=""> 
«input type="button" onclick-"ajax load json request();" 
value=" 通 过 Ajax 解析 JSON 数据 "/> 
«div id-"id-div-ajax-txt"»«/div» 
«div id-"id-div-ajax-json"»«/div» 
«/div» 
</body> 
<script type="text/javascript"> 
var xhr = null; // TODO: define XMLHttpRequest Object 
function ajax load json request() { 
if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7t, Edge, etc. 
xhr = new XMLHttpRequest(); 
) else if (window.ActiveXObject) ( // TODO: IE5, IE6 
xhr - new ActiveXObject ("Microsoft.XMLHTTP"); 
) else ( 
xhr — null; 
} 
if (xbr !- null) { 
xhr.onreadystatechange - on state change; 
xhr.open("GET", "ajax.json", true); 
xhr.send (null); 
) else ( 


console.log("Your browser does not support XMLHTTP."); 


i iun 
36 
37 
38 


) 


function on state change() { 


if (xhr.readyState -- 4) { 
if (xhr.status -- 200) { 
var jsonDoc - xhr.responseText; 
document.getElementById('id-div-ajax-txt'). 


innerText - jsonDoc; 


var jsonObj JSON.parse(jsonDoc); 
var jsonWeb - jsonObj.web; 


var len - jsonWeb.length; 
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45 var v = "<table border-'1'»«tr»«th»Title«c/th»«th»Address«/th»«th» 
Info«/th»«/tr»"; 

46 for (let i = 0; i < len; i++) ( 

47] v t= "«tr»"; 

48 { 

49 Ery l 

50 v t= "etd»" + jsonWeb[:].title 4 "«/tdo"; 

51 ) catch (err) f 

52 v += "<td> </td>"; 

53 } 

54 } 

59 { 

56 try í 

57 v += "<td>" + jsonWeb[i].address + "</td>"; 

58 } catch (err) { 

59 v= "ctd» c/td»"; 

60 } 

61 } 

62 { 

63 try ( 

64 y += "ebd»" + jsonWeb[il.info t "e/Edo"; 

65 ) catch (err) ( 

66 y += "<td> </td>"; 

67 } 

68 } 

69 v += "«/tr»"; 

70 } 

71 v += "«/table»"; 

72 document.getElementById('id-div-ajax-json').innerHTML - v; 

Ta } else { 

74 console.log ("Problem retrieving data:" + xhr.statusText); 

75 } 

76 } 

77 } 

78 «/script» 

79 </html> 


关于 【代码 11-5】 的 说 明 : 
e 第 14 行 代 码 通 过 <input> 标 签 元 素 定 义 了 一 个 按钮 ， 并 定义 了 单 击 onclick 事件 方法 
(ajax load json request() )， 用 于 执行 Ajax 异步 解析 JSON 文件 的 操作 。 
e 第 15 行 代码 通过 <div id="id-div-ajax-txt"> 标 签 元 素 定义 了 一 个 层 区 域 ， 用 于 显示 通过 Ajax 
异步 方式 解析 JSON 文件 所 获取 的 文本 内 容 。 
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o 第 16 行 代码 通过 <div id='"id-div-ajax-json"> 标 签 元 素 定 义 了 另 一 个 层 区 域 ,用 于 显示 通过 Ajax 
异步 方式 解析 JSON 文件 后 将 所 获取 的 数据 填充 到 一 个 动态 生成 的 表格 中 。 
o 第 20 行 代码 定义 了 一 个 XMLHttpRequest 对 象 实例 (xhr )， 并 初始 化 为 null。 
e 第 21~36 行 代码 是 ajax load json request() 方 法 的 实现 过 程 ， 有 具体 内 容 如 下 : 
> 第 22~28 行 代码 用 于 创建 XMLHttpRequest 对象 实例 ( 见 【 代 码 11-1】). 
> 第 29~35 行 代码 用 于 执行 Ajax 异步 请 求 操作 ( 见 【 代 码 11-2〗)。 其 中 ， 第 30 行 代码 定 
义 了 回调 方法 (on_state change() ), 第 31 行 代 码 调用 的 open() 方 法 定义 了 异步 请 求 的 JSON 
文件 路 径 ， 为 本 地 的 文本 文件 ("ajax.json" )。 
e 第 37~45 行 代码 是 on state_change() 回 调 方法 的 实现 过 程 (参考 【代码 11-3】〗)， 需 要 介绍 的 
内 容 如 下 : 
> 第 40 行 代码 通过 XMLHttpRequest *T 3&8. responseText 属性 获取 了 解析 JSON 文件 
("ajax.json" ) 中 的 内 容 ， 并 以 文本 形式 保存 在 变量 jsonDoc 中 ， 然 后 在 第 41 行 代码 中 通 
过 层 («div id="id-div-ajax-txt"> ) 元 素 进行 显示 。 
> 第 42 行 代 码 通过 JSON 对 象 的 parse() 方 法 ( 将 文本 转化 为 JSON 对 象 格式 ) 将 变量 jsonDoc 
解析 为 JSON 对 象 ( XÈ jsonObj ). 
> 第 43 行 代 码 通过 变量 jsonObj 获取 了 JSON 文件 ("ajax.json" ) 中 定义 的 web 数组， 并 保 
存在 变量 jsonWeb 中 。 这 里 需要 强调 的 是 ，JSON 对 象 数 据 格式 就 是 直接 通过 键 名 来 获取 
键 值 的 (区 别 于 XML 格式 )。 
> 第 4$~72 行 代码 通过 变量 jsonWeb 直接 操作 键 名 获取 键 值 ， 然 后 填充 进 一 个 动态 生成 的 
表格 中 ， 并 通过 层 («div id-"id-div-ajax-json"» ) 元 素 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 11.4 和 图 11.5 所 示 。 
如 图 11.4 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 解析 JSON 文件 ("ajax.json")〉 所 得 到 的 文 


本 内 容 ， 注 意 JSON 格式 与 XML 格式 的 区 别 (更 加 简洁 了 ) 。 


address"; "http://www.jscode.com", BRA; 
p Sja Sepi Code Segments" 通过 Ajax 解 析 JSON 数 据 


{ 
"title": "jQue 


as "jQuery Code Segments 


{ 
title": "Ajax", 


inn : "Ajax Code Segments 


] 
} 


E JavaScript 全 程 实例 


Œ © localhost:63342/ v «(2$ » 


JavaScript Ajax 应 用 - 解析 JSON 数 据 区 JavaScript 全 程 实例 x | 十 = BH X 
| —  — — | 


Q (5 localhost:63342 eg o» 


JavaScript Ajax 应 用 - 解析 JSON 数 据 


web": [ 


title": "JavaScript", 


address": "http//wwwjqcode.com "T 


http//www.Jjscode.com  |JavaScript Code Segments 


address". "http//www.ajaxcode.com", 


http://www .jqcode.com | jQuery Code Segments 
http://www.ajaxcode.com | Ajax Code Segments 


图 11.4 Ajax 实现 解析 JSON 文件 (文本 方式 ) 图 11.5 Ajax 实现 解析 JSON 文件 (JSON 方式 ) 
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如 图 11.5 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 解析 JSON 文件 ("ajax.json"〉 并 将 返回 的 
数据 填充 进 一 个 动态 生成 的 表格 中 的 效果 。 


11.6 ”实现 一 个 Ajax 框架 


前 文中 陆续 介绍 了 通过 Ajax 解析 文本 文件 、 XML 文件 和 JSON 格式 文件 的 方法 , 细心 的 读者 
一 定 会 发 现 创建 Ajax 应 用 的 代码 基本 都 有 固定 的 流程 和 模式 。 设计 人 员 可 以 通过 编写 Ajax 框架 来 
构建 模块 化 的 开 妈 流程 ， 进 而 提高 代码 的 使 用 效率 。 目 前 ， 主 流 的 JavaScript 框架 (如 县 有 代表 性 
的 jQuery HER) 均 实现 了 Ajax 模块 化 功能 ， 以 便于 设计 人 员 使 用 Ajax 功能 。 

在 本 节 中 ， 我 们 就 自己 设计 一 个 非常 简单 的 Ajax 框架 ， 让 读者 大 致 了 解 一 下 开发 框架 的 基本 
流程 。 下 和 面 看 一 下 具体 的 JavaScript 代码 实例 。 


【代码 11-6】( 详 见 源 代码 目录 ch11-js-ajax-myframework.html 文件 ) 


01 <script type="text/javascript"> 
/** 
* my ajax framework 
=j 
function myAjaxFramework (options) { 
var resType; // TODO: define file type 
if (!options || !options.url) { // TODO: 检测 是 否 存在 请 求 的 URL 
return false; 
} 
if (/txt/.test(options.url)) i 
resType - "text"; 
) else if (/xml/.test(options.url)) { 
resType - "xml"; 
) else if (/json/.test(options.url)) { 
resType - "json"; 
} else { 
resType = ""; 
} 
/** 
* 数据 初始 化 
kf 
options.data = options.data || ""; // TODO: 竺 传送 的 值 
options.method = (options.method || "GET").toUpperCase(); 
// TODO :默认 是 GET 
options.async = options.async || true; 


// TODO: 异步 (true) 或 同步 (false) 


25 


26 


27 


28 
29 
30 
3T 


32 
33 
34 
35 
36 
aT 
38 
33 
40 
41 
42 
43 


44 
45 
46 
47 
48 
49 
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options.responseType = options.responseType || resType; 


// TODO: response type 


options.successCall - options.successCall || false; 
// TODO: 成 功 回 调 
options.failureCall = options.failureCall || false; 


// TODO: 失败 回调 
// TODO: define XMLHttpRequest 
var xhr; 
// TODO: create XMLHttpRequest 
if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7*, Edge, etc. 
xhr - new XMLHttpRequest(); 


) else if (window.ActiveXObject) { // TODO: IES; TEG 
xhr - new ActiveXObject ("Microsoft.XMLHTTP"); 
) else ( 


xhr = null; 
} 
ir (xhr r= ngll) | 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4) { 
if (xhr.status == 200) { 
if (options.successCall) { 
options.successCall (getResponseData (xhr, 
options.responseType)); 
) 
) else { 
if (options.failureCall) { 


options.failureCall(xhr, xhr.status); 


}; 
xhr.open(options.method,options.url-*(options.method-- 
"ORI"? "O"q4o5L10ns.data:""),options.async); 
if (options.method !- "GET" && options.data) { 
xhr.send(options.data); 
) else ( 
xhr.send(); 
} 
) else ( 
console.log("Your browser does not support XMLHTTP."); 
} 
return true; // TODO: myAjaxFramework 调用 成 功 
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62 

63 

64 * get response data 

65 t6 

66 function getResponseData(xhr, resType) { 

67 if (resType === "text") { 

68 return (resType: resType, resData: xhr.responseText]; 
69 ) else if (resType === "xml") { 

70 return (resType: resType, resData: xhr.responseXML]); 
71 ) else if (resType === "json") ( 

72 return (resType: resType, resData: 


JSON.parse (xhr.responseText)]; 


73 } else { 
74 return 
T5 

76 } 

71] «/script» 


关于 【代码 11-6】 的 说 明 : 
e 第 05~62 行 代码 是 我 们 定义 的 Ajax 框架 (myAjaxFramework ) 的 实现 过 程 ， 具 体内 容 如 下 : 
> 第 05 行 代码 以 函数 方式 (function ) 定义 了 Ajax 框架 (myAjaxFramework )， 同 时 定义 了 
一 个 参数 (options )， 用 来 传递 Ajax 相关 属性 。 
> 第 06 行 代码 定义 了 一 个 变量 (resType ), 用 来 保存 异步 加 载 文件 的 类 型 (文本 TXT., XML 
或 JSON ). 
> 第 10~18 行 代码 借助 正则 表达 式 的 方式 来 获取 异步 加 载 文件 的 类 型 (TEXT, XML 或 
JSON )， 并 保存 在 变量 (resType ) P. 
> 第 22~27 行 代码 用 于 初始 化 参数 (options )， 包 括 异 步 传输 的 数据 (data)、 请 求 方式 (GET 
或 POST )、 文 件 类 型 ( resType )、 成 功 回调 方法 (successCall ) 和 失败 回调 方法 
(failureCall ) 等 。 
> 第 29~37 行 代码 定义 并 创建 了 XMLHttpRequest 对 象 实例 (xhr ). 
> 第 38~60 行 代码 用 于 执行 Ajax 异步 请 求 操 作 。 关 键 代 码 包 括 : 第 43 行 代码 调用 了 成 功 
回调 方法 ( successCall )， 并 通过 自 定 义 方 法 ( getResponseData() ) 获取 了 异步 返回 的 数据 ; 
第 52 行 代 码 调用 的 open() 方 法 打开 异步 请 求 的 文件 ; 第 53 ~ 57 行 代码 用 于 判断 请 求 类 型 
(GET 或 POST )， 并 调用 send() 方 法 执行 异步 请 求 的 操作 。 
o 第 66~76 行 代码 是 自 定义 getResponseData() 方 法 的 实现 过 程 , 主要 是 根据 异步 请 求 文件 的 类 
型 来 获取 异步 请 求 的 返回 数据 (responseText 或 .responseXML ). 


以 上 就 是 我 们 实现 的 一 个 非常 简单 的 Ajax 框架 (myAjaxFramework) 的 过 程 ， 这 个 框架 主要 
用 来 目 动 区 分 文件 类 型 并 实现 异步 加 载 功能 。 
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11.7 ”使 用 Ajax 框架 轻松 加 载 文件 


在 本 节 中 ， 我 们 将 在 刚刚 完成 的 Ajax 框架 (myAjaxFramework) 的 基础 上 实现 轻松 异步 加 载 
文件 的 操作 。 下 面 看 一 下 具体 的 JavaScript 代码 实例 。 


【代码 11-7】( 详 见 源 代码 目录 ch11-js-ajax-load-files.html 文件 ) 


001 
002 
003 
004 
005 
006 
007 
008 
009 
010 
011 
012 
013 
014 


015 
016 
017 
018 
019 
020 
021 
022 
023 
024 
025 
026 
027 
028 
029 
030 
031 
032 


<!doctype html» 
«html lang-"en"» 
«head» 
«1-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </tit1le> 
</head> 
«body» 
«1-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Ajax 应 用 - 使 用 Ajax 轻松 加 载 文 件 </nav> 
</header> 
<!-- 添加 文档 主体 内 容 --> 
«div id-"id-div-ajax" style=""> 
«input type-"button" onclick-"on my ajax();" 
value=" 通 过 Ajax 框架 加 载 文 件 "/> 
<div> 解 析 文 件 内 容 :</div> 
<div id="id-div-ajax-response"></div> 
</div> 
</body> 
<script type="text/javascript"> 
/** 
* my ajax framework 
i i 
function myAjaxFramework(options) { 
var resType; // TODO: define file type 
if (!options || !options.url) ( // TODO: 检测 是 否 存在 请 求 的 URL 
return false; 
} 
if (fExt/.testloptions.url)) d 
resType - "text"; 
) else if (/xml/.test(options.url)) { 
resType - "xml"; 


) else if (/json/.test(options.url)) { 
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033 resType = "json"; 
034 } else ( 
035 resType = ""; 
036 } 
037 p 
038 * 数据 初始 化 
039 EN 
040 options.data = options.data || "";  // TODO: 竺 传送 的 值 
041 options.method = (options.method || "GET").toUpperCase(); 
// TODO :默认 是 GET 
042 options.async = options.async || true; 
// TODO: 异步 (true) 或 同步 (false) 
043 options.responseType - options.responseType || resType; 
// TODO:response type 
044 options.successCall - options.successCall || false; 
// TODO: 成 功 回调 
045 options.failureCall = options.failureCall || false; 
// TODO: 失败 回调 
046 // TODO: define XMLHttpRequest 
047 var xhr; 
048 // TODO: create XMLHttpRequest 
049 if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7*, Edge, etc. 
050 xhr - new XMLHttpRequest(); 
051 ) else if (window.ActiveXObject) ( // TODO: IE5, IE6 
052 xhr - new ActiveXObject ("Microsoft.XMLHTTP"); 
053 } else ( 
054 xhr — nulli; 
055 } 
056 1T [xhr !— nali) 4 
057 xhr.onreadystatechange = function () { 
058 if (xhr.readyState == 4) { 
059 if (xhr.status == 200) { 
060 if (options.successCall) { 
061 options.successCall(getResponseData (xhr, options.url, 
options.responseType)); 
062 } 
063 ) else { 
064 if (options.failureCall) { 
065 options.failureCall(xhr, xhr.status); 


066 ) 


067 
068 
069 
070 


071 
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088 
089 
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}; 
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xhr.open(options.method, options.url + (options.method == "GET" ? "?" 


t opLions.data : ""), options.async); 

if (options.method !- "GET" && options.data) { 
xhr.send(options.data); 

) else ( 
xhr.send(); 

} 

} else ( 
console.log("Your browser does not support XMLHTTP."); 


return true; // TODO: myAjaxFramework 调用 成 功 
} 
/** 
* get response data 
CT 
function getResponseData(xhr, resUrl, resType) { 
if (resType === "text") { 
return (resType: resType, resUrl: resUrl, resData: 
xhr.responseText]; 
} else if (resType === "xml") { 
return (resType: resType, resUrl: resUrl, resData: 
xhr.responseXML); 
) else if (resType === "json") { 
return {resType: resType, resUrl: resUrl, resData: 
JSON.parse (xhr.responseText)]; 
} else { 


return {}; 


} 

/** 

* on my_ajax 

Er 

function on my ajax() 1 
[** 
* call myAjaxFramework 
tf 


myAjaxFramework ({ 
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104 // TODO: 定义 url 

105 "uri" "agdx.LzE", 

106 // TODO: 成 功 回调 

107 "successCall": function (resObj) | 
108 loadFiles (resObj); 

109 ), 

110 // TODO: 失败 回调 

TIT "failureCall": function (xmlRes, resCode) { 
112 console.log(resCode); 

113 } 

114 )); 

115 dai 

116 * call myAjaxFramework 

117 ky 

118 myAjaxFramework(í 

119 // TODO: 定义 url 

120 Purit "ajax xmi", 

12 // TODO: 成 功 回调 

122 "successCall": function (resObj) { 
123 loadFiles (resObj); 

124 ), 

125 // TODO: 失败 回调 

126 "failureCall": function (xmlRes, resCode) { 
Tr console.log(resCode); 

128 } 

129 DE 

130 pur 

L3T * call myAjaxFramework 

132 ss 

133 myAjaxFramework ({ 

134 // TODO: 定义 url 

135 "url": "à3j3x.]Sson", 

136 // TODO: 成 功 回调 

137 "successCall": function (resObj) { 
138 loadFiles (resObj); 

139 ), 

140 // TODO: 失败 回调 

141 "failureCall": function (xmlRes, resCode) { 
142 console.log(resCode); 

143 } 

144 )); 


145 } 
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104 // TODO: 定义 url 

105 "uri" "agdx.LzE", 

106 // TODO: 成 功 回调 

107 "successCall": function (resObj) | 
108 loadFiles (resObj); 

109 ), 

110 // TODO: 失败 回调 

TIT "failureCall": function (xmlRes, resCode) { 
112 console.log(resCode); 

113 } 

114 )); 

115 dai 

116 * call myAjaxFramework 

117 ky 

118 myAjaxFramework(í 

119 // TODO: 定义 url 

120 Purit "ajax xmi", 

12 // TODO: 成 功 回调 

122 "successCall": function (resObj) { 
123 loadFiles (resObj); 

124 ), 

125 // TODO: 失败 回调 

126 "failureCall": function (xmlRes, resCode) { 
Tr console.log(resCode); 

128 } 

129 DE 

130 pur 

L3T * call myAjaxFramework 

132 ss 

133 myAjaxFramework ({ 

134 // TODO: 定义 url 

135 "url": "à3j3x.]Sson", 

136 // TODO: 成 功 回调 

137 "successCall": function (resObj) { 
138 loadFiles (resObj); 

139 ), 

140 // TODO: 失败 回调 

141 "failureCall": function (xmlRes, resCode) { 
142 console.log(resCode); 

143 } 

144 )); 


145 } 
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LEY 
vData += "<td>" + xx[0].firstChild.nodeValue + 
me fe 
} catch (er) í 
vData += "«td» «/td»"; 


} 

vData += "</tr>"; 
} 
vData += "</table>"; 
vData += "<br><br>"; 


document.getElementById("id-div-ajax-response").innerHTML += 


vUrl + vData; 


break; 


case "json": 


var vData 


vUrl = "异步 加 载 JSON 文件 : " + resObj.resUrl + "<br>"; 
Var jsonObj = resObj.resData; 
//var jsonStringify = JSON.stringify(jsonDoc); 
var jsonWeb - jsonObj.web; 
var len - jsonWeb.length; 
= "<table border-'1l'»«tr»«th»Title«c/th»«th»Address«/th» 
«th»Info«/th»«/tr»"; 
for (let 12 0; i < len; itt) f 
vData += "<tr>"; 
{ 
LIV 1 
vData += "<td>" + jsonWeb[i].title + "</td>"; 
) catch (err) { 
vData += "«td» «/td»"; 


try ( 
vData += "<td>" + jsonWeb[i].address + "</td>"; 
) catch (err) ( 
vData += "«td» «/td»"; 


try ( 
vData += "«td»" + jsonWeb[i].info + "«/td»"; 


) catch (err) 1 
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vData += "«td» «/td»"; 


} 

vData += "</tr>"; 
} 
vData += "</table>"; 
vData += "<br><br>"; 


document.getElementById("id-div-ajax-response").innerHTML += 


vUrl + vData; 
break; 
default: 


break; 


} 
236 «fsoripL» 
237 </html> 


关于 【代码 11-7] Bi BH: 


e 【代码 11-7】 是 在 【代码 11-6】 myAjaxFramework 框架 ). [4X3 11-3] ( 异步 加 载 文本 文件 )、 
【代码 11-4】( 异步 加 载 XML 文件 ) 和 【代码 11-5】( 异步 加 载 JSON 文件 ) 的 基础 上 改进 


e HEU ik getResponseData(0) 略 做 了 修改 ， 增 加 了 一 个 文件 路 径 参 数 ， 可 以 获取 异步 加 载 文 
件 的 路 径 。 


o 自 定 义 方 法 loadFilesO) 整 合 了 【代码 11-3】( 异步 加 载 文本 文件 )【 代 码 11-4】( 异步 加 载 XML 
文件 ) 和 【代码 11-5 C 3-292933, JSON 文件 ) 的 代码 , 实现 了 将 异步 加 载 的 XML 文件 和 JSON 
文件 内 容 转 化 为 表格 形式 的 功能 。 

下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 11.6 所 示 。 


JavaScript 全 程 实例 x [m 


# Q (Q © localhost63342/js-total- 


JavaScript Ajax 应 用 - 使 用 Ajax 轻松 加 载 文件 


通过 Ajax 框架 加 载 文件 MO 


解析 文件 内 容 : 


11.6 Ajax 框架 轻松 加 载 文件 〈 初 始 状态 ) 


如 图 11.6 中 的 箭头 所 示 ， 在 页 面 中 单 击 “ 通 过 Ajax 框架 加 载 文件 ”按钮 ， 文 件 异 步 加 载 的 效 
果 如 图 11.7 所 示 。 
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异步 加 载 文本 文件 : ajax.txt 7^ 
Hello Ajax, This is from txt Tes A anon ) 


JavaScript | https//wwwjscode.com 
http://www.jqcode.com 
[Ajax |httpi//www.ajaxcode.com | Ajax Code Segments — | 


异步 加 载 JSON 文 件 : ajax.json 


httpy/wwwjscodecom 
httpy/wwwjqcodecom 


图 11.7 Ajax 框架 轻松 加 载 文件 〈 加 载 完成 ) 


如 图 11.7 中 的 标识 所 示 ， 页 面 中 显示 了 通过 Ajax 异步 方式 加 载 文 本 文件 (ajax.txt) 、XML 
文件 Cajax.xmD 和 JSON 文件 〈"ajax.json") 的 效果 。 


11.8 Ajax 跨 域 异步 交互 


Ajax 技术 真正 发 挥 作用 的 地 方 是 能 够 实现 跨 域 与 服务 器 进行 异步 数据 交互 功能 。Ajax 技术 的 
优势 还 体现 在 数据 加 载 过 程 中 不 会 重新 加 载 整个 页 面 、 仅仅 是 局 部 刷新 网 页 内 容 , 显 苦 增强 了 网 页 
浏览 的 用 户 体 验 效果 。 下 面 看 一 个 通过 Ajax 实现 跨 域 异步 交互 (PHP 服务 器 ) 的 JavaScript 代码 
实例 。 


【代码 11-8】( 详 见 源 代码 目录 ch11-js-ajax-php.html 文件 ) 


<!doctype html» 
«html lang="en"> 


<head> 
<!-- 添加 文档 头 部 内 容 --> 
«title»JavaScript 全 程 实例 </title> 
</head> 
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28 
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«body» 
«1-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript Ajax 应 用 - Ajax 路 域 异步 交互 </nav> 
«/header» 


«1-- 添加 文档 主体 内 容 --> 
«div id-"id-div-ajax" style=""> 
«input type-"button" onclick-"ajax load php request();" 
value=" 通 过 Ajax 解析 PHP"/» 
<div> 解 析 PHP 文件 :</div> 
«div id-"id-div-ajax-php"»«/div» 
«/div» 
</body> 
<script type="text/javascript"> 
var xhr = null; // TODO: define XMLHttpRequest Object 
/** 
* request php file by Ajax 
i 
function ajax load php request() { 
if (window.XMLHttpRequest) { // TODO: Chrome, Firefox, Opera, 
IE7*, Edge, etc. 
xhr = new XMLHttpRequest (); 
) else if (window.ActiveXObject) ( // TODO: IE5, IE6 
xhr = new ActiveXObject ("Microsoft.XMLHTTP"); 
} else { 
xhr = null; 
i 
if (xbr l= null) i 
xhr.onreadystatechange - on state change; 
xhr.open("GET", "ajax.php", true); 
xhr.send (null); 
) else ( 


console.log("Your browser does not support XMLHTTP."); 


} 
/** 
* callback func 
tr 
function on state change() { 
var resText, iPos, vData, resJson, jsonObj, iLen; 
if (xhr.readyState -- 4) { 
if (xhr.status == 200) ( 
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resText - xhr.responseText; 

iPos = resText.indexOf('!'); 

vData = resText.substr(0, iPos + 1); 

resJson = resText.substr(iPos + 1); 

if(resJson.indexOf('(') > -1) { 
jsonObj = JSON.parse(resJson); 
iLen = jsonObj.length; 


vData += "<table border-'1'»«tr»«th»Title«c«/th»«th»Address«/th» 


«th»Info«/th»«/tr»"; 
for (let i = 0; i < iLen; i++) { 
vData += "<tr>"; 
{ 
try i 
Data t= "iT T Soni CICS TT "ecfEedo" 
} catch (err) { 
vData += "<td> </td>"; 


try ( 

vData += "<td>" + jsonObj[i]l.address + "</td>"; 
} catch (err) { 

vData += "<td> </td>"; 


try ( 

vData += "<td>" + jsonObj[i].info + "</td>"; 
} catch (err) { 

vData += "«td» </td>"; 


} 

vData += "</tr>"; 
} 
vData += "</table>"; 
document .getElementById ('id-div-ajax-php'). 

innerHTML = vData; 
} else { 

document.getElementById('id-div-ajax-php'). 


innerText - resText; 


) else { 
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86 console.log("Problem retrieving data:" + xhr.statusText); 
87 
88 


89 
90 «/script» 
91 </html> 


关于 【代码 11-8】 的 说 明 : 


e 【代码 11-8】 与 衣 面 的 代码 实例 不 同 ， 异 步 交 互 的 是 PHP 服务 器 端的 文件 (第 34 行 代码 定 
义 的 ajax.php 文件 ). 服务 器 端 文件 的 运行 与 本 地 文件 不 同 ， 网 页 需要 在 搭建 的 服务 器 上 运行 
才 可 以 得 到 正确 的 结果 。 


下 面 将 PHP 文件 的 代码 简单 介绍 一 下 。 


【代码 11-9】( 详 见 源 代码 目录 ajax.php X) 


«?php 
echo "Hello, this is from server php file by ajax!"; 
$webArr = array( 
array("title"-»"JavaScript", 
"address"-»"http://www.jscode.com", 
"info"-»"JavaScript Code Segments"), 
array ("title"-»"jQuery", 
"address"-»"http://www.jqcode.com", 
"info"-»"jQuery Code Segments"), 
array("title"-»"Ajax", 


"address"-»"http://www.ajax.com", 


"info"-»"Ajax Code Segments") 
); 
echo json encode($webArr); // 将 数组 进行 json 编码 
?> 


关于 【代码 11-9】 的 说 明 : 

e 第 02 行 代码 通过 echo 语 句 回 写 一 行文 本 。 

e 第 03~13 行 代码 定义 了 一 个 二 维 数组 (webArr), 第 14 行 代码 通过 json encode() 语 名 将 二 维 
数组 (webArr ) 进行 JSON 格式 编码 ， 并 通过 echo i$ 2 915, 

e 这样 ，PHP 文件 就 同时 将 一 行 字符 串 文 本 和 一 个 JSON 对 梨 回 写 ， 交 由 Ajax 进行 异步 处 理 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 11.8 所 示 。 在 无 服务 器 的 环 
境 下 会 直接 将 PHP 文件 (ajax.php) 解析 为 文本 进行 显示 。 读 者 可 以 注意 到 ， 解 析 得 到 的 文本 是 全 
部 PHP 代码 。 

在 PHP 服务 器 的 环境 下 运行 ， 页 面 的 效果 如 图 11.9 所 示 ， 得 到 了 解析 的 字符 串 文 本 以 及 将 
JSON 对 象 转化 为 表格 形式 显示 的 效果 。 
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JavaScript 全 程 实例 | Eg Javascript 全 X | 十 一 口 


> ^ Q © localhost63342/js-tot: e 92$» 


JavaScript Ajax 应 用 - Ajax 跨 域 异步 交互 


解析 PHP 文 件 : 


«?php 
echo "Hello, this is from server php file by ajax"; 


$webArr = array( 
array( title" 2» "JavaScript", 
"address" - » "http://www.jscode.com", "info" - » "JavaScript 
Code Segments”), 
array( title" - » "jQuery", 
"address" - » ^http://www.jqcode.com", "info" 7 » "jQuery 
Code Segments’), 
array(" title" - » "Ajax", "address" - » "http;//www.ajax.com", 
"info" 2 » "Ajax Code Segments”) 
); 


echo json_encode($webArn); // 将 数组 进行 json 编 码 
?> 


图 11.8 Ajax 跨 域 异步 交互 (无 服务 器 环境 ) 
€, P CQ © localhost:9090/js-total e D » 


JavaScript Ajax 应 用 - Ajax 跨 域 异 步 交互 


解析 PHP 文 件 : 


Hello, this is from server php file by ajax! 
Title | ^ Address | mm — 


11.9 Ajax 跨 域 异步 交互 (PHP 服务 器 环境 ) 


#128 React 开发 


为 了 帮助 读者 开阔 思路 和 增长 见识 ， 本 章 将 详细 介绍 一 下 如 今 在 Web Hi mI Ac OUS AE T KH 
的 React HER, FUE Ps I React 框架 的 基础 、 使 用 入 门 以 及 Web 前 闯 应 用 开发 ， 目 的 是 让 读 
者 了 解 一 下 先进 的 Web 前 端 开发 搁 术 的 发 展 趋势 。 


12.1 React 概述 


对 于 大 多 数 读 者 而 言 ，React 会 感觉 很 阳 生 《可 能 不 如 jQuery 那么 耳熟能详 ) 。 其 实 ，React 
是 大 有 来 头 的 , 最 初 是 社交 网 站 巨头 Facebook 公司 的 一 个 内 部 项 目 , 是 用 来 架构 Instagram 网 站 的 。 

现在 感觉 有 点 意思 了 吧 ! Instagram 网 站 就 是 在 移动 端 中 非常 有 名 的 、 用 于 图 片 分 享 的 社交 应 
用 ， 可 以 将 用 户 随 时 随地 抓 招 的 图 片 在 移动 终端 设备 (手机 、 平 板 电 脑 等 ) 上 彼此 分 享 。Instagram 
网 站 最 初 也 是 一 家 独立 公司 ， 于 2012 年 被 Facebook 公司 收购 。 

如 同 大 多 数 的 前 端 开发 框架 一 样 ，React 最 初 的 开发 者 也 是 不 满意 市 面 上 已 有 的 产品 ， 所 以 决 
EAC ERRIA., React 的 设计 思想 很 独特 、 视 角 很 新 奇 ， 应 该 说 是 有 单 命 性 的 一 类 。 
总 体 而 言 ，React 在 性 能 上 很 出 众 ， 而 代码 逻辑 却 又 非常 简单 ， 所 以 有 越 来 越 多 的 开 及 人 员 开 始 关 
注 并 使 用 该 框架 。 

从 本 质 上 讲 ，React 框架 主要 用 于 构建 前 端 UI， 其 核心 思想 就 是 封装 组 件 。 各 个 组 件 维护 自身 
的 状态 和 UI， 每 当 状 态 变 更 时 都 会 目 动 重新 演 染 整个 组 件 ， 而 不 需要 反复 得 找 DOM 元 素 后 册 重 
新 泻 染 更 改 整个 组 件 了 。 

下 面 简 单 概括 一 下 React 框架 的 主要 特点 (参考 官方 文档 及 网 络 资 源 ) : 

d) 声明 式 设 计 : React 采用 声明 范式 ， 可 以 轻松 摘 述 应 用 。 
(2) 高 效 : React 通过 对 DOM 的 模拟 ， 最 大 限度 地 减少 与 DOM 的 交互 。 
(3) 灵活 : React 可 以 与 己 知 的 库 或 框架 很 好 地 配合 。 


(4) 使 用 JSX 语法 : JSX 是 JavaScript 语法 的 扩展 ， 可 以 极 大 地 提高 JS 运行 效率 。 
(5) 组 件 复 用 : 通过 React 构建 组 件 ， 使 得 代码 易于 复 用 ， 可 在 大 型 项 目 应 用 开发 中 发 挥 
优势 。 


(6) 单 同 啊 应 的 数据 流 : React 实现 了 单 同 啊 应 的 数据 流 ， 减 少 了 重复 代码 ， 比 传统 数据 绑 
定 方式 更 简单 。 


通过 React 框架 可 以 设计 出 功能 强大 的 Web 前 端 应 用 ， 后 续 将 为 读者 介绍 React 开发 的 相关 
ME SUP 


备注 : React 框架 官方 网 址 为 https://reactjs.org/. 
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12.2 ”第 一 个 React 应 用 


从 本 节 开 始 , 我 们 正式 介绍 如 何 使 用 React 框架 开发 Web fili? V H1» React 应 用 开发 涉及 的 知 
识 面 比较 宽泛 ， 如 何 切 入 着 实 费 了 一 番 脑 筋 。 不 过 思 前 想 后 ， 还 是 觉得 第 一 个 React 应 用 从 基本 的 
“Hello World” 开 始 最 合适 。 所 谓 “ 万 变 不 离 其 宗 ”， 指 的 也 就 是 这 个 含义 吧 。 
首先 , 要 使 用 React 框架 就 要 先 安装 该 框架 。 好 在 React 框架 可 以 直接 通过 引用 的 方式 来 使 用 ， 
这 里 推荐 两 个 比较 好 的 CDN 地 址 。 


第 一 个 是 Staticfile CDN 的 React CDN 库 ， 有 具体 如 下 : 


«script src-"https://cdn.staticfile.org/react/16.4.0/umd/ 
react.development.js"»«/script» 

«script src-"https://cdn.staticfile.org/react-dom/16.4.0/umd/ 
react-dom.development.js"»«/script» 

«1-- 生产 环境 中 不 建议 使 用 --> 

«script src-"https://cdn.staticfile.org/babel-standalone/6.26.0/ 
babel.min.js"»«/script» 


第 二 个 是 官方 提供 的 CDN 库 ， 有 具体 如 下 : 


«script src-"https://unpkg.com/react816/umd/react.development.js"»«/script» 

«script src-"https://unpkg.com/react-dom16/umd/ 
react-dom.development.js"»«/script» 

«1-- 生产 环境 中 不 建议 使 用 --> 

«script src="https://unpkg.com/babel-standalone@6.26.0/ 
babel.min.js"»«/script» 


在 如 上 的 两 个 CDN 库 中 ， 都 引用 了 react.min.js. react-dom.min.js 和 babel.min.js 这 三 个 库 文 
fF, Bde P: 


è react.min.js 是 React 框架 的 核心 库 。 

* react-dom.min.js 提供 与 DOM 相关 的 功能 。 

€ babelminjs 由 Babel 编译 器 提供 ， 可 以 将 ES6 代码 转 为 ES5 代码 ， 这 样 就 能 在 不 支持 ES6 
的 浏览 器 上 执行 React 代码 (注意 ， 在 生产 环境 中 不 建议 使 用 )。 


下 面 看 一 个 使 用 React 框架 实现 “Hello World” 应 用 的 代码 实例 。 


【代码 12-1】( 详 见 源 代 码 目录 ch12-react-helloworld.html 文件 ) 


«!DOCTYPE html» 
<html> 
<head> 
«script src-"https://unpkg.com/react816/umd/react.development.js"» 


</script> 
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«script src-"https://unpkg.com/react-dom16/umd/ 
react-dom.development.js"»«/script» 


«1-- Don't use this in production: --» 
«script src-"https://unpkg.com/babel-standalone86.26.0/babel.min.js"» 


</script> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript React 开发 - 第 一 个 React 应 用 </nav> 
</header> 
«div id-"root"»«/div» 
«script type-"text/babel"» 
ReactDOM. render ( 
«hl5Hello, world!«/hl», 
document.getElementById('root') 
); 
«/script» 
</body> 
</html> 


关于 【代码 12-1】 的 说 明 : 
e 第 04 行 、 第 05 行 和 第 07 行 代码 分 别 引 用 了 React 框架 所 需 的 三 个 库 文件 (react.min.js、 


react-dom.min.js 和 babel.min.js ). 
e 第 15 行 代 码 通 过 <div id="root"> 标 签 元 素 定 义 了 一 个 层 ， 用 于 显示 通过 React 框架 泻 染 的 文 
本 内 容 。 
e 第 17~ 20 行 代码 通过 调用 React DOM 对 和 象 的 render(0) 方 法 来 泻 染 元 素 ， 有 具体 内 容 如 下 : 
> 第 18 行 代码 定义 了 要 引入 的 元 素 节点 <h1>。 
> 第 19 行 代码 获取 了 页 面 中 要 泻 染 的 元 素 节点 <div id="root">。 
> 通过 ReactDOMLrender() 方 法 将 <h1> 元 素 节 点 泻 染 到 页 面 的 层 <div id="root"> 元 素 节 点 中 。 
上 面 的 第 17 一 20 行 代码 很 直观 ， 但 是 逻辑 性 不 太 强 ， 尝 试 将 其 代码 改写 成 如 下 形式 就 更 容易 
理解 了 。 


【代码 12-2】( 详 见 源 代码 目录 ch12-react-dom-render.html 文件 ) 


01 <script type="text/babel"> 
02 const hl = (<hl>Hello, world!</h1>); 


03 var root = document.getElementById('root'); 
04 ReactDOM.render(hl, root); 
05 </script> 
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«script src-"https://unpkg.com/react-dom16/umd/ 
react-dom.development.js"»«/script» 


«1-- Don't use this in production: --» 
«script src-"https://unpkg.com/babel-standalone86.26.0/babel.min.js"» 


</script> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript React 开发 - 第 一 个 React 应 用 </nav> 
</header> 
«div id-"root"»«/div» 
«script type-"text/babel"» 
ReactDOM. render ( 
«hl5Hello, world!«/hl», 
document.getElementById('root') 
); 
«/script» 
</body> 
</html> 


关于 【代码 12-1】 的 说 明 : 
e 第 04 行 、 第 05 行 和 第 07 行 代码 分 别 引 用 了 React 框架 所 需 的 三 个 库 文件 (react.min.js、 


react-dom.min.js 和 babel.min.js ). 
e 第 15 行 代 码 通 过 <div id="root"> 标 签 元 素 定 义 了 一 个 层 ， 用 于 显示 通过 React 框架 泻 染 的 文 
本 内 容 。 
e 第 17~ 20 行 代码 通过 调用 React DOM 对 和 象 的 render(0) 方 法 来 泻 染 元 素 ， 有 具体 内 容 如 下 : 
> 第 18 行 代码 定义 了 要 引入 的 元 素 节点 <h1>。 
> 第 19 行 代码 获取 了 页 面 中 要 泻 染 的 元 素 节点 <div id="root">。 
> 通过 ReactDOMLrender() 方 法 将 <h1> 元 素 节 点 泻 染 到 页 面 的 层 <div id="root"> 元 素 节 点 中 。 
上 面 的 第 17 一 20 行 代码 很 直观 ， 但 是 逻辑 性 不 太 强 ， 尝 试 将 其 代码 改写 成 如 下 形式 就 更 容易 
理解 了 。 


【代码 12-2】( 详 见 源 代码 目录 ch12-react-dom-render.html 文件 ) 


01 <script type="text/babel"> 
02 const hl = (<hl>Hello, world!</h1>); 


03 var root = document.getElementById('root'); 
04 ReactDOM.render(hl, root); 
05 </script> 
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13 } 
14 // TODO: define timer 


15 setInterval(updateTime, 1000); 
I6 «script» 


关于 【代码 12-3】 的 说 明 : 


e 第 01 行 代码 通过 <div id='"root"> 标 签 元 素 定 义 了 一 个 层 ， 用 于 显示 通过 React 框架 泻 染 的 文 
本 内 容 。 
o 第 06~13 行 代码 定义 了 一 个 自 定义 方法 updateTime()， 用 于 实现 通过 React 泻 染 更 新 元 素 ， 
具体 内 容 如 下 : 
> 第 07~ 10 行 代 码 通过 const 关键 字 定义 了 一 个 常量 (helloworld ), 描述 了 要 引入 的 容器 节 
点 <div>, 包括 一 个 <h1> 标 签 元 素 (用 于 定义 标题 ) 和 一 个 <h2> 标 签 元 素 (定义 标题 内 容 ); 
同时 ， 在 <h2> 标 签 元 素 内 使 用 花 括 号 定义 了 一 个 时 间 对 象 ， 用 于 获取 当前 时 间 。 
第 11 行 代码 获取 了 页 面 中 要 泻 染 的 元 素 节 点 <div id="root">， 保 存在 变量 (root) P. 
第 12 行 代码 调用 React DOM 对 象 的 render(0) 方 法 ,将 hl 元 素 节点 泻 染 到 root 元素 节 点 中 。 
15 行 代 码 使 用 setInterval() 方 法 设置 了 一 个 计时 器 ， 通 过 调用 updateTime() 方 法 实现 定时 
(1000ms ) È REHAR. 


Av Vv 


FEJ Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 12.2 所 示 。 


Q! © localhost6334? e(2» = 


JavaScript React 开 发 - 演 染 更 新 元 素 


[CR Q Inspector (5) Console (D Debu&ger 六 B] ec X 
十 Q, Search L Pi 


+ «div ids"root"» ^ 
wv <div> 


1-2 
«hpHello, world!c/hi» ESSBSRIBITBIIS Ea 
vw «h2 


现在 时 间 是 
11:44:55 AM 
«/h2» 


html > body > div*root > div > h2 


[|] Rules Layout Computed Changes Fonts Anime 


12.2 React 实现 泻 染 更 新 元 素 


如 图 12.2 中 的 般 头 和 标识 所 示 ， 页 面 效 果 显 示 通 过 React 演 染 方式 ， 仅 仅 只 更 新 时 间 元 素 
T. 
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12.4 React 虚拟 DOM 


React 的 核心 特性 之 一 ， 就 是 可 以 通过 创建 虚拟 DOM 来 避免 重复 过 多 的 操作 实际 DOM, M 
而 实现 对 网 页 性 能 的 提升 。 相 信 读 者 都 知道 , HTML 网 页 的 骨架 是 由 各 类 DOM 元 素 构成 的 。 但 是 ， 
React 中 定义 的 DOM 并 不 是 传统 概念 的 DOM ,而 是 React 用 来 在 浏览 器 中 创建 元 素 组 合 的 对 象 ( 理 
解 为 DOM 组 件 似乎 更 直观 ) ， 因 此 设计 人 员 会 将 React DOM 称 为 虚拟 DOM. 

这 里 既然 说 到 了 虚拟 DOM， 我 们 就 先 将 其 与 实际 DOM 做 一 个 比较 ， 便 于 读者 更 好 地 理解 
React DOM。 说 来 也 巧 ， 在 HTML DOM 和 React DOM 中 均 定义 了 一 个 createElement() 方 法 ， 用 来 
创建 元 素 对 象 ,只 不 过 HTML DOM 中 的 createElement() 方 法 创建 的 是 一 个 实际 DOM 对 象 ,而 React 
DOM 中 的 createElement() 方 法 创建 的 是 一 个 虚拟 DOM。 为 了 区 别 这 个 同名 方法 ， 先 看 一 个 通过 
JavaScript 创建 实际 DOM 的 代码 实例 。 


【代码 12-4】( 详 见 源 代码 目录 ch12- js-createElement.html 文件 ) 


<!DOCTYPE html» 

«html» 

«head» 
«title»JavaScript 全 程 实例 </title> 

</head> 

<body> 

<!-- 添加 文档 主体 内 容 --> 

«header» 
«nav»JavaScript React 开发 - 创建 实际 DOM</nav> 

</header> 

«div id-'id-div-react'»«/div» 

«script type-"text/babel"» 
// TODO: get div 
var divReact = document.getElementById('id-div-react'); 
// TODO: JavaScript DOM 
const jsSpan = document.createElement ('span'); 
const jsH3 - document.createElement('h3'); 
jsH3.innerText - "JavaScript DOM"; 
const jsP = document.createElement('p'); 
jsP.innerText - "Create dom by JavaScript's createElement() func."; 
jsSpan.appendChild(jsH3); 
jsSpan.appendChild(jsP); 
divReact.appendChild(jsSpan); 

</script> 

</body> 

</html> 
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关于 【代码 12-4】 的 说 明 : 
o 第 11 行 代码 通过 <div id='id-div-react 人 > 标签 元 素 定义 了 一 个 层 ， 是 用 于 显示 通过 JavaScript 创 
建 实际 DOM 的 容器 。 
e 第 16~23 行 代码 用 于 在 层 容器 <div id='id-div-react> 中 创建 实际 DOM 节点 ， 有 具体 内 容 如 下 : 
> 第 16 行 代码 调用 Document 对 象 的 createElement() 方 法 ， 创 建 了 一 个 <span> 元 素 节 点 。 
> 第 17~18 行 代码 调用 Document 对象 的 createElement(0) 方 法 ， 创 建 了 一 个 <h3> 元 素 节 点 ， 
并 定义 了 文本 内 容 。 
> 第 19~20 行 代码 再 次 调用 Document 对 和 象 的 createElement(0) 方 法 ， 创 建 了 一 个 <p> 元 素 节 
点 ， 同 样 定义 了 文本 内 容 。 
> 第 21~22 行 代 码 分 别 调用 appendChild() 方 法 将 <h3> 和 <p> 元 素 节点 填充 进 <span> 元 素 节 
点 内 。 
> 第 23 行 代 码 再 次 调用 appendChild() 方 法 ， 将 <span> 元 素 节点 填充 进 层 容器 <div 
id='id-div-react 人 > 内 ， 从 而 实现 创建 实际 DOM 的 操作 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效果 如 图 12.3 所 示 。 
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JavaScript React HÈ - 创建 实际 DOM 


createElement 方 法 创建 
的 实际 DOM 节 点 


JavaScript DOM 


Create dom by JavaScript's createElement() func. 


图 12.3 JavaScript 实现 创建 实际 DOM 
下 面 看 一 个 通过 React 创建 虚拟 DOM 的 代码 实例 。 


【代码 12-5】( 详 见 源 代码 目录 ch12-react-createElement.html 文件 ) 


01 «div id-'id-div-react'»«/div» 

02 «script type-"text/babel"» 

03 // TODO: get div 

04 var divReact = document.getElementById('id-div-react'); 

05 // TODO: React DOM 

06 const reactH3 = React.createElement("h3", {}, "React DOM"); 


07 const reactP = React.createElement ("p",(),"Create dom by React's 


createElement() func."); 
08 const reactSpan = React.createElement("span", {}, reactH3, reactP); 
09 ReactDOM.render(reactSpan, divReact); 
10 </script> 
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关于 【代码 12-5】 的 说 明 : 
e 第 01 行 代码 通过 <div id=-'id-div-react> 标 签 元 素 定义 了 一 个 层 ， 是 用 于 显示 通过 React 创建 虚 
拟 DOM 的 容器 。 
e 第 06~ 09 行 代 码 用 于 在 层 容器 <div id='id-div-react 人 > 中 创建 虚拟 DOM 节点 ， 具 体内 容 如 下 : 
> 第 06 行 和 第 07 行 代 码 调用 React DOM 对 象 的 createElement() 方 法 分 别 创建 了 一 个 <h3> 
元 素 节点 (reactH3 ) 和 一 个 <p> 元 素 节 点 (reactP )， 并 相应 定义 了 文本 内 容 。 
> 第 08 行 代码 调用 React DOM 对 象 的 createElement() 方 法 ， 创 建 了 一 个 <span> 元 素 节 点 
( reactSpan )， 然 后 将 刚刚 创建 的 <h3> 元 素 节 点 ( reactH3 ) 和 <p> 元 素 节点 (reactP ) 填充 
进去 。 
> 第 09 行 代码 调用 React DOM 对 象 的 render() 方 法 ， 将 <span> 元 素 节 点 (reactSpan ) 泻 染 
到 层 <div id-'id-div-react^ 2-25 "P HTE TF. 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.4 所 示 。 
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124 React 创建 虚拟 DOM 


如 图 12.4 "PES B SRUbRIR TZ, HP zs f 383X React DOM 的 createElement()77 1:18 22 HH 
来 的 虚拟 DOM。 读 者 可 以 与 图 12.3 中 通过 JavaScript 创建 的 实际 DOM 进行 对 比 ， 二 者 在 显示 效 
果 上 是 等 同 的 。 


12.5 React JSX 初步 


在 12.4 节 中 , 我 们 介绍 了 如 何 通 过 React DOM 的 createElement() 方 法 创建 虚拟 DOM, 并 将 创 
建 的 虚拟 DOM 演 染 到 页 面 中 的 过 程 。 但 是 ，Facebook 的 React 研发 团队 还 是 觉得 不 够 完美 ， 于 是 
就 开发 出 来 一 种 专属 React 的 JavaScript 语法 一 一 JSX。 

所 谓 JSX， 其 实 就 是 JavaScript XML 的 缩写 ， 直 译 过 来 就 是 基于 JavaScript 的 XML。JSX 看 起 
来 似乎 是 一 种 XML 格式 ， 其 实 本 质 上 仍 是 JavaScript 语言 ， 只 不 过 是 将 js 脚本 书写 成 XML 格式 。 

JSX 作为 一 种 标记 语言 ， 文 持 自 定义 属性 ， 并 具有 可 扩展 性 。 同 时 ，JSX 基本 是 专用 于 React 
开发 的 ， 如 果 打 算 在 HTML 页 面 输 出 DOM 节点 和 内 容 ， 我 们 推荐 使 用 React 内 置 的 JSX 语法 来 
实现 。 
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另外 ， 如 果 要 在 React 中 使 用 JSX 语法 ,， 则 必须 引用 “babeljs” 文 件 来 解析 JSX， 同 时 <script> 
标签 中 必须 改 用 “type='"textbabel" ”属性 。 原 因 在 于 使 用 “type="text/babel" ”属性 蔡 换 
“type="text/javascript" ”属性 ,浏览 器 内 置 的 JavaScript 解释 器 就 不 会 解析 里 边 的 代码 , 转 而 由 babel 
进行 解析 ， 从 而 避免 React 代码 与 原生 JavaScript 代码 发 生 混 消 。 
介绍 了 这 么 多 的 概念 和 内 容 ， 下 面 让 我 们 先 看 一 下 JSX 的 庐山 真面目 吧 ! 其 实 ， 在 前 文 【 代 
码 12-1】 中 的 第 18 行 代 码 就 已 经 使 用 了 JSX iik, BA: 


18 <hl>Hello, world!«/hl1», 

这 里 的 <h1> 标 签 元 素 就 是 通过 JSX 方式 定义 的 ， 严 格 来 说 就 是 一 个 虚拟 DOM. 

为 了 详细 介绍 React JSX 的 使 用 方法 ， 下 向 先 看 一 个 将 前 文中 【代码 12-5】 改 写成 JSX 方式 
的 代码 实例 。 


【代码 12-6】( 详 见 源 代码 目录 ch12-react-jsx-intro.html 文件 ) 


<!DOCTYPE html» 
«html» 
«head» 
«script src-"https://unpkg.com/react816/umd/react.development.js"» 
</script> 
«script src="https://unpkg.com/react-dom@16/umd/r 
eact-dom.development.js"»«/script» 
«script src-"https://unpkg.com/babel-standalone86.26.0/babel.min.js"» 
«/script» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript React 开发 - JSX 初步 </nav> 
</header> 
«div id-'id-div-react'»«/div» 
«script type-"text/babel"» 
// TODO: get div 
var divReact = document.getElementById('id-div-react'); 
// TODO: React JSX 
const reactSpan - ( 
<span> 
<h3>React </h3> 
<p>Create HTML DOM by React JSX.</p> 
</span> 
); 
ReactDOM.render(reactSpan, divReact); 
«/script» 
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27 «/body» 
28 «/html» 


关于 【代码 12-6】 的 说 明 : 
o 在 第 15 行 代码 中 ，<script type="text/babel"> 标 签 内 使 用 了 JSX 语法 要 求 的 babel 属性 ， 这 一 
点 要 特别 提醒 读者 注意 一 下 。 
e 第 19~24 行 定义 了 一 段 完整 的 JSX 代码 ， 实 现 了 一 个 虚拟 DOM 对 象 ， 具 体内 容 如 下 : 
> 第 19~24 行 代 码 通过 const 关键 字 定 义 了 一 个 常量 (reactSpan )， 该 常量 使 用 小 括号 包含 
了 通过 <span>、<h3> 和 <p> 标 签 定义 的 元 素 组 合 。 
> 第 20~23 行 代 码 定义 的 HTML 标签 符合 XML 格式， 而 常量 (reactSpan ) 的 定义 完全 符 
合 JavaScript 语法 ， 因 此 该 语法 被 称 为 JSX。 
e 第 25 行 代码 调用 React DOM 对 象 的 render() 方 法 ， 将 JSX 代码 泻 染 到 页 面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.5 所 示 。 
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图 12.5 ReactJSX 初步 


如 图 12.5 中 的 第 头 和 标识 所 示 , 页 和 面 中 显示 了 通过 React JSX 方式 泻 染 的 效果 , 与 【代码 12-5] 
实现 的 功能 是 一 致 的 。 其 实 ， 通 过 React JSX 方式 定义 的 虚拟 DOM 最 终 也 会 转换 为 通过 
createElement() 方 法 实现 的 DOM. 


12.06 在 JSX 中 使 用 JavaScript 表达 式 


既然 React JSX 本 质 上 使 用 的 就 是 JavaScript 语法 ， 那 么 目 然 也 可 以 使 用 JavaScript 表达 式 。 
不 过 , 在 React JSX 中 使 用 JavaScript 表达 式 要 使 用 大 括号 “{}” 插 起 来 。 React JSX 中 的 JavaScript 
表达 式 形 式 有 很 多 种 ， 我 们 先 看 一 个 最 简单 的 JavaScript 计算 表达 式 的 代码 实例 。 


【代码 12-7】( 详 见 源 代码 目录 ch12-react-jsx-cal-exp.html 文件 ) 


01 «div id='id-div-react'></div> 
02 «script type-"text/babel"» 
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03 // TODO: get div 
04 var divReact - document.getElementById('id-div-react'); 


05 // TODO: React JSX 

06 const reactSpan - ( 

07 «span» 

08 <h3>JSX - JavaScript Calculate Expressionc/h3» 
09 <p>Now calculate: 1 + 2 = (142].«/p» 

10 </span> 

11 ); 

12 ReactDOM.render(reactSpan, divReact); 

13. «/scripE» 


关于 【代码 12-7】 的 说 明 : 


e 第 09 行 代码 中 大 括号 "(1 -2Y 内 定义 的 就 是 一 个 JavaScript 计算 表达 式 。React JSX 语法 
会 将 “1+2?” 的 算术 运算 结果 显示 在 页 面 中 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 12.6 所 示 。 
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JavaScript React 开 发 - JSX JavaScript 表 达 式 (一 ) 


JSX - JavaScript Calculate Expression 


Now calculate: 1 + 2 = 3. 


图 12.6 ReactJSX 中 的 JavaScript 计算 表达 式 


如 图 12.6 中 的 箭头 所 示 ， 页 面 中 成 功 显 示 了 表达 式 “1+2” 的 运算 结果 “3”。 
React JSX 中 的 JavaScript 表达 式 是 无 法 使 用 条 件 语句 (if) 的 , 但 是 可 以 使 用 三 元 条 件 表达 式 。 
下 面 看 一 个 具体 的 代码 实例 。 


【代码 12-8】( 详 见 源 代码 目录 ch12-react-jsx-tri-exp.html 文件 ) 


01 <div id='id-div-react'></div> 
02 <script type="text/babel"> 
03 // TODO: get div 


04 var divReact = document.getElementById('id-div-react'); 
05 // TODO: React JSX 


06 var i = 1; 


07 const reactSpan 
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08 <SPan> 
09 «h3»JSX - JavaScript Triple Expression</h3> 
10 <p>Return (i == 1 or i !- 1) is : {i == 1 ? 'true' : 'false'].«/p» 


</span> 
I», ); 
L3 ReactDOM.render(reactSpan, divReact); 
14 </script> 


关于 【代码 12-8】 的 说 明 : 
e 第 06 行 代码 定义 了 一 个 变量 (i)， 初 始 化 为 数值 1 进行 测试 ， 然 后 变更 为 数值 2 进行 测试 。 
e@ 第 10 行 代码 中 大 括号 “{i 二 1?'rue': 'false' P 内 定义 的 就 是 一 个 JavaScript 三 元 条 件 表 达 式 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.7 所 示 。 
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Return (i == 1 or i != 1) is : true. CIO Return (i == 1 or i != 1) is : false. CIS 


图 12.7 ReactJSX 中 的 JavaScript 三 元 条 件 表 达 式 


如 图 12.7 中 的 篆 头 所 示 ， 左 边 页 面 中 显示 了 初始 条 件 “i=1” 时 的 三 元 条 件 表达 式 的 运算 结果 
为 “true”， 右 边 页 面 中 显示 了 初始 条 件 “i2” 时 的 三 元 条 件 表达 式 的 运 自 结果 为 “false”。 


12.7 在 JSX 中 使 用 JavaScript 函数 


本 节 在 JavaScript 表达 式 的 基础 上 ， 进 一 步 介 绍 在 JSX 中 使 用 JavaScript 函数 。 在 JSX 中 调用 
JavaScript 图 数 与 表达 式 一 样 ， 同 样 是 需要 使 用 大 括号 “{} ”来 引用 的 。 下 面 我 们 看 一 个 具体 的 代 
码 实例 。 


【代码 12-9】( 详 见 源 代码 目录 ch12-react-jsx-js-func.html 文件 ) 


«'DOCTYPE html» 
«html» 
«head» 


«script src-"https://unpkg.com/react816/umd/react.development.js"» 


«/script» 


05 


06 


07 
08 
09 
10 
IT 
T 
153 
14 
215 
16 
T3 
18 
13 
20 
Zi 
22 
23 
24 
25 


26 
21 
28 
29 
30 
ZU 
32 
33 
34 
35 
36 
37 
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«script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development.js"»«/script» 
«script src-"https://unpkg.com/babel-standalone86.26.0/babel.min.js"» 
«/script» 
«title»JavaScript 全 程 实例 </tit1le> 
«/head» 
«body» 
«1-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript React 开发 - 在 JSX 中 使 用 JavaScript 函数 </nav> 
</header> 


<div id='id-div-react'></div> 
«script type-"text/babel"» 
// TODO: get div 
var divReact = document.getElementById('id-div-react'); 
// TODO: define const obj 
const userinfo - ( 
id: *007"', 
username: 'king', 
gender: 'male' 
l: 
function getUserinfo (ui) { 
return ui.username + "[id:" + ui- -id + "]'s gender is 十 
ui.gender + "."; 
} 
// TODO: React JSX 
const reactSpan = ( 
«span» 
«h3»JavaScript Function in JSX«/h3» 
«p»(getUserinfo (userinfo) }</p> 
</span> 
); 
ReactDOM.render(reactSpan, divReact); 
«/script» 
</body> 
</html> 


关于 【代码 12-9】 的 说 明 : 

e 第 19~23 行 代码 定义 了 一 个 JavaScript 常量 对 象 (userinfo )， 并 初始 化 了 一 组 个 人 相关 信息 。 

o 第 24~26 行 代码 定义 了 一 个 JavaScript 函数 ( getUserinfo() ), 并 通过 第 25 行 代码 返回 了 一 行 
文本 信息 (通过 将 个 人 相关 信息 所 组 合 而 成 ). 
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o 第 28~33 行 代码 定义 了 一 段 完整 的 JSX 代码 , 实现 了 一 个 虚拟 DOM 对象 ( 常量 reactSpan ). 
其 中 ， 在 第 31 行 代码 中 调用 了 JavaScript 函数 ( getUserinfo() ). 
e 第 34 行 代码 调用 React DOM 对 象 的 fender() 方 法 ， 将 庶 拟 DOM 对象 (常量 reactSpan ) 泻 染 


到 页 面 中 进行 显示 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.8 所 示 。 
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Javascript Function in JSX 
king[id:007]'s gender is male. 
12.8 React JSX 中 的 JavaScript 函数 (一) 


如 图 12.8 中 的 第 头 所 示 ， 页 和 面 中 成 功 显 示 了 通过 JavaScript 图 数 返 回 的 个 人 信息 。 
React JSX 表达 式 还 可 以 通过 磐 入 JavaScript 图 数 中 来 运行 ， 该 方式 的 代码 写法 更 加 直接 ， 更 
重要 的 是 可 以 在 JSX 中 使 用 条 件 语句 (if) 来 进行 逻辑 判断 。 下 面 看 一 个 具体 的 代码 实例 。 


【代码 12-10】( 详 见 源 代码 目录 ch12-react-jsx-exp-in-func.html 文件 ) 


01 «div id='id-div-react'></div> 

02 «script type-"text/babel"» 

03 // TODO: get div 

04 var divReact - document.getElementById('id-div-react'); 
05 // TODO: define const obj 

06 const userinfo = ( 

07 id: "Umi. 

08 username: 'king', 

09 gender: 'male' 

10 }; 

11 // TODO: React JSX Exp in JavaScript Function 

12 function getUserinfo (ui) { 

13 Eig 

14 return «span» 

15 <h3>JSX Exp in JavaScript Function«c/h3» 
16 X«p»(ui.username T "[id:" F ui id t "]'s gender is " -* 


ui.gender + "."j«/p» 
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17 </span>; 

18 ) else i 

19 return «span» 

20 <h3>JSX Exp in JavaScript Functionc/h3» 
21 Xp»empty user info.«/p» 


22 </span>; 

23 

24 } 

25 // TODO: React Render 

26 ReactDOM. render (getUserinfo (userinfo), divReact); 
2] «fsocrETpE» 


XT UK 12-10] Bii BH: 

o 这 段 代 码 是 在 【代码 12-9】 的 基础 上 修改 而 成 的 ， 主 要 是 将 JSX 代码 CL 14 ~ 17 行 和 第 
19~22 行 代码 ) 以 表达 式 的 形式 直接 嵌入 getUserinfo0 函 数 方法 中 来 运行 了 。 

e 另外 ， 在 第 13 行 代码 中 加 入 了 条 件 语句 (让 ) 来 判断 参数 (ui) 是 否 有 效 ， 然 后 根据 判断 结 


果 选 择 相应 的 JSX 代码 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.9 所 示 。 
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129 React JSX 中 的 JavaScript 函数 (二 ) 


如 图 12.9 中 的 般 头 所 示 ， 左 边 页 面 中 显示 了 参数 Cui 有 效 时 的 页 面 效 果 ， 右 边 页 面 中 显示 
了 参数 ai) 为 空 时 的 页 面 效果 。 


12.8 React Components 设计 模式 


React Components 〈 组 件 ) 设计 模式 允许 设计 人 员 将 用 户 界面 的 UI 部 分 剥离 出 来 ， 构 成 一 个 
单独 的 部 件 。React Components (组件) 在 设计 原理 上 保持 了 独立 性 和 功能 完整 性 ， 因 此 也 就 有 具有 
了 可 重复 使 用 的 特性 ， 这 也 是 React 的 性 能 优势 之 一 。 
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在 React 中 定义 Components (组件) 一 般 有 两 种 方式 ， 分 别 是 图 数 方式 和 ES6 class 方式 ， 这 
两 种 方式 在 功能 效果 上 是 等 同 的 。 下 面 我 们 分 别 介 绍 这 两 种 方式 的 设计 过 程 。 
首先 ， 看 一 个 基于 函数 方式 设计 React Components (组件) 的 代码 实例 。 


【代码 12-11】( 详 见 源 代码 目录 ch12-react-comp-func.html 文件 ) 


01 «!DOCTYPE html» 

02 «html» 

03 «head» 

04 «script src-"https://unpkg.com/react8016/umd/react.development.js"» 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development.js"»«/script» 

06 «script src-"https://unpkg.com/babel-standalone86.26.0/babel.min.js"» 
«script» 

07 «title»JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 

10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

12 «nav»JavaScript React 开发 - React Components (函数 方式 ) «/nav» 

13 «/header» 

14 «div id-'id-div-react'»«/div» 

15 «script type-"text/babel"» 


16 // TODO: get div 

TT var divReact = document.getElementById('id-div-react'); 
18 // TODO: function React Components 

19 function ReactComp() { 

20 return <span> 

21 «h3»React Components (Func) «/h3» 

22 <p>This is a func React Components .</P> 
23 </span>; 

24 } 

25 // TODO: define const 

26 const elReactComp = «ReactComp/»; 

zi ReactDOM. render (elReactComp, divReact); 

JB x«/seripb» 

29 «/body» 

30 «/html» 


关于 【代码 12-11] Rus BA: 
e 第 19~24 行 通过 一 个 自 定义 函数 ( ReactComp() ) 封装 了 一 个 虚拟 DOM 对 象 ， 具 体 说 明 如 下 : 
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> 第 19 行 代 码 声 明 的 函数 名 (ReactComp ) 就 是 React Components (组 件 ) 的 名 称 (组 
件 名 )。 

> 第 20~23 行 代 码 返回 了 一 个 通过 <span>、<h3> 和 <p> 标 签 元 素 组 合 而 成 的 虚拟 DOM. 

e 第 26 行 代码 通过 const 声明 了 一 个 常量 (elReactComp )， 保 存 了 以 组 件 名 (ReactComp ) Æ 
成 的 自 定义 标签 (<ReactComp/> )。 特别 要 注意 , 原生 HTML 标签 元 素 名 可 以 小 写字 母 开头 ， 
而 React 自 定义 组 件 名 必须 以 大 写字 母 开 头 ; 另外 ， 自 定义 组 件 只 能 包含 一 个 顶层 标签 ， 否 
则 也 会 报错 。 

o 第 27 行 代码 调用 React DOM 对 象 的 render() 方 法 , 将 自 定义 组 件 (<ReactComp/> ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 12.10 所 示 。 


JavaScript 全 程 实例 


Q! © localhost:63342, Zn Wo» 


JavaScript React 开 发 - React Components( 函 数 方式 ) 


React Components(Func) 


This is a func React Components. s. 


12.10 React Components (组 件 ) 函数 方式 


如 图 12.10 中 的 盘 头 所 示 ， 页 面 中 成 功 显 示 了 通过 React Components (组件) 函数 方式 渔 染 的 
效果 。 

除了 函数 方式 外 ，React Components (HF) 还 可 以 使 用 ES6 class 方式 来 生成 。 下 面 看 一 个 
基于 ES6 class 方式 设计 React Components (组件 ) 的 代码 实例 。 


【代码 12-12】( 详 见 源 代码 目录 ch12-react-comp-class.html 文件 ) 


«div id='id-div-react'></div> 
«script type="text/babel"> 

// TODO: get div 

var divReact = document.getElementById('id-div-react'); 

// TODO: function React Components 

class ReactComp extends React.Component { 

render() { 
return «span» 
«h3»React Components (ES6 class)«/h3» 


<p>This is a ES6 class React Components .</p> 


</span>; 
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T 
13 } 
14 // TODO: define const 


Lies const elReactComp = «ReactComp/»; 
16 ReactDOM.render(elReactComp, divReact); 
1? «/seript» 


关于 【代码 12-12】 的 说 明 : 
e 这 段 代 码 是 在 【代码 12-11】〗 的 基础 上 修改 而 成 的 ， 主 要 是 将 通过 函数 方式 定义 的 组 件 
( «ReactComp/» ) 改 成 通过 ES6 class 方式 来 定义 。 

e 第 06~13 行 通过 class 关键 字 声 明了 一 个 React Components (组 件 ) 类 ， 有 具体 说 明 如 下 : 
> 第 06 行 代码 定义 类 名 为 ReactComp， 继 承 自 React Component 对 象 。 
> 第 07~ 12 行 代码 通过 render 方法 定义 了 一 个 通过 <span>、<h3> 和 <p> 标 签 元 素 组 合 而 成 

的 虚拟 DOM， 然 后 通过 retum 语句 返回 。 

e 第 15 行 代码 通过 const 声明 了 一 个 常量 (elReactComp )， 保 存 了 以 组 件 名 (ReactComp ) Æ 
成 的 自 定义 标签 (<ReactComp/> ). 

e 第 16 行 代码 调用 React DOM *[ $4 render() 方 法 , 将 自 定义 组 件 (<ReactComp/> ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 12.11 所 示 。 


JavaScript 全 程 实例 x Em = o 


Œ © localhost:63342/js-t - to» 


JavaScript React HÈ - React Components(ES6 class) 


React Components(ES6 class) 


This is a ES6 class React Components. t 


图 12.11 React Components (组 件 ) ES6 class 方式 


如 图 12.11 中 的 盘 头 所 示 ， 页 面 中 成 功 显示 了 通过 React Components (组件 ) ES6 class 方式 泻 
染 的 效果 。 
12.9 React Components 参数 


React Components 〈 组 件 ) 还 文 持 使 用 参数 (properties) ， 可 以 通过 props 对 象 来 实现 数据 传 
递 和 返回 。 下 面 看 一 个 具体 的 代码 实例 。 
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【代码 12-13】( 详 见 源 代码 目录 ch12-react-comp-props.html 文件 ) 


01 «!DOCTYPE html» 


02 «html» 

03 «head» 

04 «script src-"https://unpkg.com/react816/umd/react.development.js"» 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development.js"»«/script» 

06 «script src-"https://unpkg.com/babel-standalone86.26.0/babel.min.js"» 
</script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 «style type="text/css"> 

10 p.p-right ( 

TY text-align: right; 

12 } 

13 </style> 

14 <body> 


15 «!-- 添加 文档 主体 内 容 --> 

16 <header> 

17 «nav»JavaScript React 开发 - React Components 参数 </nav> 
18 «/header» 

19 «div id-'id-div-react'»«/div» 

20 «script type-"text/babel"» 


21 // TODO: get div 

22 var divReact = document.getElementById('id-div-react'); 
23 // TODO: function React Components with props 

24 function ReactComp(props) { 

25 return «span» 

26 «h3»React Components ((props.name])«/h3» 

27 <p>This is a webpage for {props.info}.</p> 

28 <p className={props.className}> --- by king.</p> 
29 </span>; 

30 } 

31 // TODO: define const 

3 const elReactComp = «ReactComp 

33 name-"props" 

34 info-"React Components Props" 

35 className-"p-right"/»; 

36 ReactDOM.render(elReactComp, divReact); 

31 «/scrigb» 

38 «/body» 


39 «/html» 
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关于 【代码 12-13】 的 说 明 : 

e 这 段 代码 是 在 【代码 12-11】 的 基础 上 修改 而 成 的 ， 主 要 是 增加 了 参数 props 对 象 的 使 用 。 

o 第 24~30 行 代码 通过 一 个 自 定义 函数 ( ReactComp() ) 封装 了 一 个 虚拟 DOM 对 象 ， 具 体 说 
明 如 下 : 
> 第 24 行 代码 在 声明 的 函数 名 (ReactComp ) 内 定义 了 参数 (props) 对 象 。 
> 第 26 ~28 行 代码 分 别 通过 参数 (props) 对 象 的 “name” “info” fe “className” 属性 将 

属性 值 传递 到 虚拟 DOM 中 进行 显示 。 

e 第 32~35 行 代码 通过 const 声明 了 一 个 常量 (elReactComp )， 保 存 了 以 组 件 名 ( ReactComp ) 
生成 的 自 定义 标签 (<ReactComp/> ), 在 自 定义 标签 中 依次 添加 了 “name”“info” 和 “className” 
属性 ， 并 定义 了 相应 的 属性 值 。 这 里 要 注意 一 点 ， 原 生 HTML 标签 中 的 类 属性 名 需要 替换 为 
className， 而 不 能 使 用 原生 的 class (因为 class 是 JavaScript 的 保留 字 ). 

e 第 36 行 代码 调用 React DOM 对 象 的 render() 方 法 , 将 自 定义 组 件 ( «ReactComp/» ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 12.12 所 示 。 


JavaScript 全 程 实例 x T 一 口 


Œ © localhost:63342/js-i -Vy » 


JavaScript React 开 发 - React Components 参数 


React Components(props) 
This is a webpage for React Components Props. 


--- by king. 


12.12 React Components CZHfF) 参数 (props) 


如 图 12.12 所 示 ， 页 面 中 成 功 显 示 了 通过 React Components (组 件 ) 参数 (props) 所 泻 染 的 
效果 。 


12.10 React Components 复合 


React Components( 组 件 ) 的 使 用 非常 灵活 ， 还 可 以 通过 创建 多 个 组 件 来 合成 一 个 组 件 ， 一 般 
称 之 为 组 件 复合 。React Components 〈 组 件 ) 复合 的 思想 是 把 组 件 按照 不 同 的 功能 进行 逻辑 分 割 |， 
使 得 业务 逻辑 更 加 清晰 、 管 理 更 加 高 效 。 下 面 看 一 个 关于 React Components CHH) 复合 的 代码 
实例 。 


第 12 章 React 开 发 | 285 


【代码 12-14】( 详 见 源 代码 目录 ch12-react-comp-composing.html 文件 ) 


01 
02 
03 
04 


05 


06 


07 
08 
09 
10 
Lt 
12 
Ta 
14 
13 
16 
17 
18 
13 
20 
Z1 
22 
24 
24 
s 
26 
21 
28 
29 
30 
31. 
az 
33 
34 
39 
36 
31 
38 


<!DOCTYPE html» 
«html» 
«head» 
«script src-"https://unpkg.com/react016/umd/react.development.js"» 
</script> 
<script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src-"https://unpkg.com/babel-standalone86.26.0/ 
babel.min.js"></script> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript React 开发 - React Components 复合 </nav> 
</header> 
«div id='id-div-react'></div> 
<script type="text/babel"> 
// TODO: get div 
var divReact = document.getElementById('id-div-react'); 
// TODO: function React Components - Title 
function Title (props) { 
return <h3>React Components {props .name}</h3>; 
} 
// TODO: function React Components - Content 
function Content (props) { 
return <p>This is a webpage for {props.info}.</p>; 
} 
// TODO: function React Components - Author 
function Author (props) { 
return <p className-(props.className]»--- by King.</p>; 
} 
// TODO: function React Components by Composing 
function ReactComp() { 
return ( 
«span» 
«Title name-"Composing"/» 
«Content info-"React Components by Composing"/» 
«Author className-"p-right"/» 
</span>); 
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// TODO: render 
ReactDOM.render («ReactComp/», divReact); 


«/script» 
</body> 
</html> 


关于 【代码 12-14】 的 说 明 : 
这 段 代 码 是 在 【代码 12-13】 的 基础 上 按照 React Components (组 件 ) 复合 方式 改写 的 。 
e 第 19~21 行 .第 23~25 行 和 第 27~29 行 代码 分 别 定义 了 三 个 组 件 ( Title、Content 和 Author ). 
e 第 31~38 行 代码 是 React Components( 组 件 ) 复 合 的 关键 ,通过 一 个 自 定 义 函 数 (ReactComp() ) 
封装 了 前 面 定义 的 三 个 组 件 (Title, Content 和 Author )， 具 体 说 明 如 下 : 
> 第 34 行 代码 通过 以 组 件 名 (Title) 生成 的 自 定义 标签 (<Title/> ) 定义 了 一 个 虚拟 DOM， 
并 添加 了 “name” 属 性 ; 
> 第 35 行 代码 通过 以 组 件 名 (Content) 生成 的 自 定义 标签 (<Content/> ) 定义 了 一 个 虚拟 
DOM， 并 添加 了 “info” Ætt; 
> 第 36 行 代码 通过 以 组 件 名 (Author) 生成 的 自 定义 标签 (<Author/> ) 定义 了 一 个 虚拟 
DOM， 并 添加 了 “className” 属 性 。 
o 第 40 行 代码 调用 React DOM *T 24] render() 方 法 ， 将 自 定 义 组 件 (<ReactComp/> ) 泻 染 到 页 
面 中 进行 显示 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.13 所 示 。 


JavaScript 全 程 实 例 x T = 口 


Œ © localhost63342/js-tc v 回合 » 


JavaScript React HÈ - React Components 复合 


React Components Composing 


This is a webpage for React Components by Composing. 


--- by King. 


图 12.13 React Components (组 件 ) 复合 


如 图 12.13 所 示 ， 页 面 中 成 功 显示 了 通过 React Components (HH) 复合 方式 所 泻 染 的 效果 。 
12.11 React Components 状态 


React 是 把 Components (组件) 视 作 一 个 状态 机 (State Machines) 来 设计 的 。 为 此 ，React 专 
门 定义 了 一 个 state ORA) 属性 用 于 更 新 Components (组件) 状态 。 在 React 应 用 中 ， 用 户 交 互 
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工作 只 需 通过 更 新 组 件 的 state (状态) 就 可 以 实现 ， 根 据 更 新 后 的 state (状态 ) KAY UI 并 保持 
UI 和 数据 的 一 致 〈 不 需要 操作 DOM) 。 
下 面 先 看 一 个 关于 React Components (HF) state RE) 的 代码 实例 。 


【代码 12-15】( 详 见 源 代码 目录 ch12-react-comp-state.html 文件 ) 


01 «!DOCTYPE html» 


02 «html» 

03 «head» 

04 «script src-"https://unpkg.com/react816/umd/react.development.js"» 
</script> 

05 <script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development.js"></script> 

06 «script src-"https://unpkg.com/babel-standalone86.26.0/babel.min.js"» 
</script> 

07 <title>JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 


10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

12 <nav>JavaScript React 开发 - 组 件 状态 (state)</nav> 
13 </header> 

14 «div id="id-div-react"></div> 

15 «script type-"text/babel"» 


16 // TODO: get div 

17 var divReact = document.getElementById('id-div-react'); 
18 // TODO: React Component (class) 

19 class ReactState extends React.Component { 

20 constructor(props) | 

21 super (props); 

22 console.log("state before init:"); 

23 console.log(this.state); 

24 this.state - (name: "React Component State"); 
25 console.log("state after init:"); 

26 console.log(this.state); 

2d } 

28 render() { 

29 return ( 

30 «span» 

31 «h3»React Component State«/h3» 

32 </span> 

23 ); 


34 } 
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} 
// TODO: render 
ReactDOM.render (<ReactState/>, divReact); 


</script> 
</body> 
«/html» 


关于 【代码 12-15】 的 说 明 : 
e 第 19~35 行 代码 通过 ES6 class 方式 创建 一 个 React Component 组 件 (ReactState )， 有 具体 说 明 
如 下 : 
> 第 20~27 行 代码 添加 了 一 个 类 的 构造 函数 ( constructor ) 来 初始 化 状态 ( state )。 注 意 ， 
状态 ( state ) 必 须 以 this 关键 字 的 方式 (this.state ) 调 用 , 同时 类 组 件 应 始终 使 用 super(props) 
> 第 24 行 代码 执行 了 初始 化 状态 (state ) 属性 的 操作 ( (name: "React Component State") ), 
同时 在 初始 化 之 前 (第 22~23 行 代码 ) 和 初始 化 之 后 (第 25-26 行 代码 ) 分 别 在 浏览 
器 控制 台中 输出 状态 (state )， 目 的 就 是 测试 状态 (state) 的 变化 。 
> 第 28 ~34 行 代 码 通 过 render 方法 定义 了 虚拟 DOM， 用 于 显示 React Component 组 件 


( ReactState )。 
e 第 37 行 代码 调用 React DOM 对 和 象 的 render() 方 法 ， 将 自 定义 组 件 ( «ReactState/» ) 泻 染 到 页 
面 中 进行 显示 。 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 12.14 所 示 。 


JavaScript 全 程 实例 x EE 一 o 


Œ © localhost:63342/js-t -Jr » 


JavaScript Reat HÈ - 组 件 状态 (state) 


React Component State 


v 


(w OO inspector Ç) Console © Debugger » es X 
[i Y Filter output [ ]Persist Logs 


2 items hidden by filters Reset filters 
state before init: ch12-react-state.html:24:9 
undefined 47 ch12-react-state.htm1:25:9 
state after init: ch12-react-state.html:27:9 
b Object ( name: "React Component State" } ch12-react-state.htm1:28:9 


12.14 React Components (组件) state (状态 ) 


如 图 12.14 中 的 箭头 所 示 ， 浏 览 器 控制 台中 分 别 打印 出 了 state (状态 ) 属性 在 初始 化 之 前 和 初 


始 化 之 后 的 值 。 
下 面 继续 看 一 个 如 何 使 用 React Components (CHF) state RÆ) 更 新 当前 时 间 的 代码 实例 。 
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【代码 12-16】( 详 见 源 代码 目录 ch12-react-comp-state-date.html 文件 ) 


01 «!DOCTYPE html» 

02 «html» 

03 «head» 

04 «script src-"https://unpkg.com/react8016/umd/react.development.js"» 
«/script» 

05 «script src-"https://unpkg.com/react-domQ016/umd/ 
react-dom.development.js"»«/script» 

06 «script src-"https://unpkg.com/babel-standalone86.26.0/ 
babel.min.js"»«/script» 

07 «title»JavaScript 全 程 实例 </title> 

08 </head> 

09 <body> 

10 <!-- 添加 文档 主体 内 容 --> 

11 <header> 

12 <nav>JavaScript React 开发 - 通过 组 件 状 态 (state) 更 新 时 间 </nav> 

13 </header> 

14 «div id="id-div-react"></div> 

15 «script type-"text/babel"» 


16 // TODO: get div 

Ti var divReact = document.getElementById('id-div-react'); 
18 // TODO: React Component (class) 

19 class ReactState extends React.Component { 
20 constructor(props) | 

21 super (props); 

22 this.state = (date: new Date()]); 

23 } 

24 render() { 

29 return ( 

26 <span> 

27 «h3»React Component State</h3> 
28 <p>Now is (this.state.date.toLocaleTimeString()].«/p» 
29 </span> 

30 ); 

a f 

32 } 

33 // TODO: render 

34 ReactDOM. render («ReactState/», divReact); 
35 €/script» 

36 «/body» 

37 «/html» 


关于 【代码 12-16] Bi BH: 
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e 这 段 代 码 是 在 【代码 12-15】 的 基础 上 修改 而 成 的 ， 主 要 实现 了 更 新 当前 时 间 的 功能 。 
e 在 组 件 类 (ReactState) 的 构造 方法 中 ， 第 22 行 代 码 执 行 了 初始 化 状态 (state) 属性 的 操作 
( (date: new Date()) )， 获 取 了 时 间 Date 对 象 (date ). 
e 在 组 件 类 (ReactState ) 的 render 方法 中 , 第 28 行 代码 通过 状态 (this.state ) 调 用 时 间 对 象 (date ) 
更 新 了 当前 时 间 。 
e 第 34 行 代码 调用 React DOM 51285 render() 方 法 ， 将 自 定义 组 件 (<ReactState/> ) 泻 染 到 页 
面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 上 有 具体 效果 如 图 12.15 所 示 。 


JavaScript 全 程 实例 


Œ © localhost63342/js-t Zn f|» 


JavaScript React 开 发 - 通过 组 件 状态 (state) 更 新 时 间 


React Component State 


Now is 11:30:21 AM. 


图 12.15 React Components (组 件 ) 通过 state (状态 ) 更 新 时 间 


如 图 12.15 中 的 知 头 所 示 ， 浏 览 器 中 显示 了 通过 React Components (HYF) state ORA) 更 新 
的 当前 时 间 。 


12.12 React Components 生命 周期 


在 前 一 节 中 ， 我 们 介绍 了 通过 React Components (组 件 ) state 状态) 更 新 当前 时 间 的 代码 实 
例 。 读 者 应 该 会 注意 到 ， 所 更 新 的 时 间 是 静态 的 ， 而 不 是 动态 同步 的 。 那么 ， 如 何 实 现时 间 每 秒 更 
新 一 次 的 效果 呢 ? React Components (H) 设计 了 一 个 生命 周期 (LifeCycle〉 的 方式 ， 可 以 通过 
挂 载 和 番 载 计时 器 来 实现 该 功能 。 

React 设计 是 推荐 使 用 生命 周期 (LifeCycle) 方式 的 ， 因 为 在 实际 项 目 开 发 中 需要 加 载 大 量 的 
组 件 ， 当 这 些 组 件 不 再 使 用 后 需要 通过 销毁 来 释放 组 件 所 占用 的 资源 。 生 命 周 期 (LifeCycle) 方式 
提供 了 挂 载 CcomponentDidMount()) FEIR CcomponentWillUnmount()) 这 两 个 钧 子 方法 来 实现 生 
命 周 期 管理 。 

下 面 看 一 个 通过 React Components (H) 生命 周期 方式 来 实现 网 页 时 钟 功能 的 代码 实例 。 
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【代码 12-17】( 详 见 源 代码 目录 ch12-react-comp-lifecycle.html 文件 ) 


01 
02 
03 
04 


05 


06 


07 
08 
09 
10 
Td 
12 
13 
14 
15 
16 
17 
18 
13 
20 
21 
22 
23 
24 
a 
26 
21 
28 
29 
30 
3t 
x A 
39 
34 
HB 
36 
37 


<!DOCTYPE html» 


«html» 
«head» 
«script src-"https://unpkg.com/react816/umd/react.development.js"» 
</script> 
«script src="https://unpkg.com/react-dom@16/umd/ 
react-dom.development .js"></script> 
<script src-"https://unpkg.com/babel-standalone86.26.0/ 
babel.min.js"></script> 
<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
«header» 
«nav»JavaScript React 开发 - 生命 周期 (LifeCycle)</nav> 
</header> 
<div id="id-div-react"></div> 


<script type="text/babel"> 
// TODO: get div 
var divReact = document.getElementById('id-div-react'); 
// TODO: React Component (class) 
class ReactLifeCycleClock extends React.Component { 
constructor(props) i 
super (props); 
this.state = (date: new Date()]); 
} 
// TODO: Mount 
componentDidMount() { 
this.timerID - setInterval( 
() = this.timer(), 
1000 
); 
t 
// TODO: Unmount 
componentWillUnmount() { 
clearInterval(this.timerID); 
} 
// TODO: Timer 
timer() { 
this.setState ({ 
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date: new Date() 
2. 
} 
// TODO: render 
render() { 
return ( 
«span» 
«h3»React Component LifeCycle Clock«/h3» 
<p>The current time is (this.state.date. 
toLocaleTimeString()].«/p» 
«/span» 
); 


} 

// TODO: render 

ReactDOM. render ( 
«ReactLifeCycleClock/», 
divReact 

); 


«/script» 
</body> 
</html> 


关于 【代码 12-17】 的 说 明 : 


e$ 


19 ~ 50 行 代码 通过 ES6 class 方式 创建 一 个 React Component 组 件 ( ReactLifeCycleClock ), 


具体 说 明 如 下 : 


> 


> 


dE 


第 20-23 行 代 码 添 加 了 一 个 类 的 构造 函数 ( constructor) 来 初始 化 状态 (state). Xv, 

第 22 行 代码 通过 对 状态 (this.state ) 属性 的 操作 (date: new Date() )， 定 义 了 一 个 时 间 对 

象 (date ). 

第 25 ~ 30 行 代码 定义 了 挂 载 钩 子 方法 (componentDidMount() )， 并 通过 setInterval() 2 7X 

定义 了 一 个 计时 器 (timerID )。 

第 32~34 行 代码 定义 了 趣 载 钧 子 方法 ( componentWillUnmount() )， 并 通过 clearIntervalk) 

方法 清除 了 计时 器 (timerID )。 

第 36~ 40 行 代码 定义 了 一 个 用 于 更 新 时 间 的 timer() 方 法 ， 该 方法 通过 更 新 状态 (state) 

属性 实现 同步 时 间 的 功能 。 

第 42-49 行 代 码 通过 render 方法 定义 了 虚拟 DOM， 用 于 显示 React Component 组 件 
( ReactLifeCycleClock ). 

52 ~ 55 行 代码 调用 React DOM 对 名 的 render0 方 法 ， 将 时 钟 自 定义 组 件 


( «ReactLifeCycleClock/» ) 泻 染 到 页 面 中 进行 显示 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网页， 有 具体 效果 如 图 12.16 所 示 。 
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JavaScript 全 程 实例 xX |t 口 X 


G © localhost63342/, zm wo» 三 


^ 


JavaScript React 开 发 - 生命 周期 (LifeCycle) 


React Component LifeCycle Clock 


The current time is 3:53:15 PM. 


(w* 人 Inspector (2) Console C bbugger » 


十 A Search HTML 
w «div id="id-div-react"> 


+ «Span» ^ 
«ha»React Component Lifecycle Clock«/h3» 同步 更 新 时 间 
"v «p 


The current time is 
3:53:15 PM 


«/p» 
«/span» 
«/div» 


html > body > div*id-div-react > span > p 


[d] Rules Layout Computed Changes Fonts Animations 


12.16 React Components (HF) 生命 周期 (LifeCycle) 实现 时 钟 


如 图 12.16 中 的 箭头 和 标识 所 示 ， 页 面 中 成 功 显示 了 通过 React Components (组 件 ) 生命 周期 
(LifeCycle) 方式 实现 的 同步 更 新 时 钟 的 效果 。 

在 React Components (组件) F, 无 论 是 父 组 件 还 是 子 组 件 都 不 知道 东 个 组 件 是 有 状态 的 还 是 
无 状态 的 ， 并 且 也 不 关心 茶 组 件 是 被 定义 为 一 个 图 数 方式 或 是 一 个 ES6 class 方式 的 。 这 也 就 是 为 
什么 状态 Cstate) 通 第 会 被 称 作 是 局 部 封装 ， 除 了 拥有 并 设置 它 的 组 件 外 ， 其 他 组 件 都 不 可 访问 。 

下 面 在 【代码 12-17】 的 基础 上 添加 一 个 WaterfallDate 组 件 ( 函 数 方式 ) ， 并 在 props 属性 中 
以 多 种 方式 接收 date 值 。 目 的 是 让 props 属性 不 知道 date AEKA state 状态 还 是 来 自 date 属性 输 
入 ， 验 证 React Components (HF) 的 独立 性 。 在 官方 文档 中 ， 将 下 面 的 代码 称 为 数据 瀑布 (Data 
Flow Down) 方式 。 


【代码 12-18】( 详 见 源 代码 目录 ch12-react-comp-lifecycle-waterfall-data.html 文件 ) 


01 <script type="text/babel"> 

02 // TODO: get div 

03 var divReact = document.getElementById('id-div-react'); 
04 // TODO: React Component (func) 

05 function WaterfallDate(props) { 


06 return «p»Now is (props.date.toLocaleTimeString()].«/p»; 
07 } 
08 // TODO: React Component (class) 


09 class ReactLifeCycleClock extends React.Component { 


10 constructor (props) { 


294 | JavaScript+Vue+React 全 程 实例 


11 super (props); 

12 this.state = (date: new Date()]); 

13 | 

14 // TODO: Mount 

br componentDidMount() { 

16 this.timerID = setInterval( 

17 () => this.timer(), 

18 1000 

19 ); 

20 } 

21 // TODO: Unmount 

22 componentWillUnmount() { 

23 clearInterval(this.timerID); 

24 } 

25 // TODO: Timer 

26 timer () { 

21 this.setState((í( 

28 date: new Date() 

29 Hiz 

30 } 

31 // TODO: render 

32 render() { 

33 return ( 

34 «span» 

33 «h3»React Component LifeCycle Clock«/h3» 

36 <P>The current time is 
(this.state.date.toLocaleTimeString()]).«/p» 

3J «h3»LifeCycle Clock(WaterFall Data)</h3> 

38 X«WaterfallDate date-(this.state.date])/» 

39 «h3»LifeCycle Clock (Func)</h3> 

40 «WaterfallDate date-(new Date () } /> 

41 </span> 

42 ); 

43 ) 

44 } 

45 // TODO: render 

46 ReactDOM. render ( 

47 «ReactLifeCycleClock/», 

48 divReact 

2 ); 


50 «/script» 
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关于 【代码 12-18】 的 说 明 : 

e 【代码 12-18] ZÉ [RA 12-17】 的 基础 上 修改 而 成 的 ， 主 要 是 在 第 05 ~ 07 行 代码 中 增加 
了 一 个 function 组 件 ( WaterfallDate )。 

e 同时 ， 在 第 32~ 43 行 代码 调用 的 render() 方 法 中 增加 了 两 种 使 用 WaterfallDate 组 件 的 方式 ， 
具体 如 下 : 
> 第 38 行 代码 是 通过 状态 (state ) 属性 获取 的 当前 时 间 。 
> 第 40 行 代码 是 直接 通过 人 工 方 式 (新 建 Date 对 象 ) 获取 的 当前 时 间 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 12.17 所 示 。 


E JavaScript 全 程 实例 x | 十 - n 


^ Q © localhost63342, — 9 R| » 


JavaScript React 开 点 - 生命 周期 (LifeCycle) 


React Component LifeCycle Clock 
The current time is 4:06:26 PM. 
LifeCycle Clock(WaterFall Data) 
Now is 4:06:26 PM. 
LifeCycle Clock(Func) 


Now is 4:06:26 PM. 


12.17 React Components 〈 组 件 ) 生命 周期 (LifeCycle) KIWE (数据 瀑布 方式 ) 


如 图 12.17 所 示 ， 数 据 瀑布 方式 类 似 于 目 顶 加 下 的 单 问 数据 流 , 不 论 任何 状态 都 始终 由 东 些 特 
定 组 件 所 有 ， 并 且 从 该 状态 导出 的 任何 数据 只 能 影响 到 下 方 的 组 件 。 


第 13 章 Vue.js 开发 


本 章 介 绍 在 Web 前 端 开发 领域 非常 火爆 的 Vue.js 框架 (一 款 用 来 构建 用 户 界面 的 渐进 式 Web 
框架 ) 。 本 章 的 内 容 主要 包括 Vuejs 框架 概述 、 泻 染 原 理 、 安 装 使 用 、 模 板 语法 、 条 件 循环 和 事 
件 属 性 等 基础 知识 。 


13.1 Vue.js 概述 


Vuejs Cvju: /， 发 音 类 似 于 英文 单词 view) 是 一 套 构 建 用 户 界面 的 渐进 式 Web 框架 ， 其 设计 
思想 就 是 通过 以 数据 驱动 和 组 件 化 视图 来 构建 用 户 界 面 。 
Vue.js 框架 采用 目 底 回 上 增 量 开发 的 设计 模式 , 框架 的 核心 库 专 注 于 视图 层 设计 , 这 样 就 易于 
与 其 他 框架 或 已 有 项 目 进 行 整 合 。 同 时 ，Vuejs 与 单 文件 组 件 或 Vues 生态 系统 扩展 库 相 结合 使 用 
时 ， 也 完全 能 够 为 复杂 的 单 页 应 用 提供 驱动 。 
对 于 Vuejs 框架 ， 业 内 有 过 这 样 的 评价 : “Vue.js 兼 具 Angular.js 和 React 的 优点 ， 并 最 大 程 
度 握 弃 了 它们 的 缺点 ”。 同 时 ，Vue.js 框架 之 所 以 深 受 广大 国内 程序 员 的 推 深 ， 因 其 作者 是 一 位 地 
HFEA GENZ, Evan You) ， 这 也 是 国人 在 开源 世界 中 的 骄傲。 
本 质 上 ，Vuejjs 框架 主要 是 基于 数据 驱动 来 专注 于 视图 组 件 设 计 的 ， 其 提供 了 更 加 人 简洁、 更 吻 
于 理解 的 API， 使 得 设计 人 员 能 够 快速 地 上 手 并 使 用 。 在 使 用 Vuejs ERZA, ENEKEN FA 
方面 的 编程 知识 : 
(1) HTML 网 页 设计 。 
(2) CSS3 层 登 样式 代码 。 
(3) JavaScript 脚本 语言 开发 。 
由 此 可 见 ， 学 习 Vue.js 框架 要 求 门 槛 相对 容易 ， 相 信 大 多 数 的 读者 都 具有 以 上 编程 语言 的 开 
发 经 验 。 
通过 Vue.js 框架 可 以 设计 出 功能 强大 的 Web 视图 应 用 ， 本 章 将 为 读者 介绍 Vue.js 开发 的 相关 
知识 及 案例 。 


备注 : Vue.js 框架 官方 网 址 为 https://cn.vuejs.org。 
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13.2 第 一 个 Vue.js 应 用 


从 本 节 开 始 , 我 们 正式 介绍 如 何 使 用 Vue.js 框架 开发 Web 前 疹 应 用 。 正 所 谓 “ 万 变 不 离 其 宗 ”， 
第 一 个 Vuejs 应 用 还 是 从 基本 的 “Hello World” 开 始 最 合适 。 

首先 ， 使 用 Vue.js 框架 要 先 引 用 Vue.js 库 文件 (区 分 开发 版 本 和 生产 版 本 ) ， 这 里 推荐 使 用 
如 下 CDN 地 址 。 

开发 版 本 的 React CDN 库 如 下 : 


<!-- 开发 环境 版 本 ， 包 含 了 有 帮助 的 命令 行 警告 --> 


«script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 


生产 版 本 的 CDN 库 如 下 : 
<!-- 生产 环境 版 本 ， 优 化 了 尺寸 和 速度 --> 


<script src="https://cdn.jsdelivr.net/npm/vue"></script> 


当然 ， 读 者 也 可 以 将 vue. js 或 vue.min.js 库 文件 下 载 到 本 地 来 引用 。 男 外 ， 如 果 想 使 用 Vue 
Devtools 进行 调试 ， 就 必须 使 用 开发 版 本 的 库 文 件 。 
下 面 看 一 下 使 用 Vue.js 框架 实现 “Hello World” 应 用 的 代码 实例 。 


【代码 13-1】( 详 见 源 代码 目录 ch13-vue-js-hello.html 文件 ) 


«!DOCTYPE html» 

<html> 

<head> 
<script sro="js/vue.js"></script> 
<title>JavaScript 全 程 实例 </title> 

</head> 

<body> 

<!-- 添加 文档 主体 内 容 --> 


«header» 


«nav»JavaScript Vue.js 开发 - Hello«/nav» 
</header> 


«div id-'id-div-vue'» 
<h3 id-"app"»5(( message }}</h3> 
«/div» 
«script» 
var app = new Vue(( 
el: 'fapp', 
data: { 


message : "Hello Vue.js!" 


298 | Javascript+Vue+React 全 程 实例 


} 
)); 


«script» 
«/body» 
</html> 


关于 【代码 13-1】 的 说 明 : 

e 第 04 行 代码 引用 了 Vue.js 框架 所 需 的 库 文件 (vuejs )。 这 里 引用 的 是 开发 版 的 库 文 件 ， 当 然 
也 可 以 引用 压缩 版 的 库 文件 (vue.min.js， 不 过 无 法 使 用 Vue Devtools 调试 功能 )。 

e $ 12-14 行 代 码 通 过 <div> 标 签 元 素 定 义 了 一 个 层 ， 其 中 第 13 行 代码 定义 的 <h3 id="app"> 
标签 元 素 用 于 显示 通过 Vue.js 框架 渔 染 的 文本 内 容 。 

e 第 16~21 行 代码 就 是 Vue.js 的 核心 , 采用 模板 语法 定义 的 声明 式 数据 泻 染 DOM 系统 ， 具 体 
内 容 如 下 : 
> 第 16 行 代码 通过 Vue 构造 器 (注意 使 用 new 关键 字 ) 创建 了 一 个 Vue 对 象 (app). 
> 第 17 行 代码 通过 “el” 参 数 指定 将 要 泻 染 的 DOM (通过 id 属性 )。 
> 第 18~20 行 代码 通过 “data” 参 数 定义 属性 ， 就 是 要 泻 染 的 数据 内 容 。 其 中 ， 在 第 19 行 

代码 中 定义 了 一 个 “message” 属性， 其 属性 值 将 会 泻 染 到 第 13 行 代码 中 对 应 的 
“{{fmessage}}” 人 位置， 特别 注意 这 里 要 将 “message” 放 进 双 大 括号 中 来 使 用 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 13.1 所 示 。 


JavaScript 全 程 实例 X | 十 


>» Q © localhost:63342/ w ee 


JavaScript Vue.js7TZ - Hello 


Hello Vue.js! 


图 13.1 Vuejs 实现 “Hello World" 


如 图 13.1 所 示 ， 页 面 中 成 功 显 示 了 通过 Vue.js 框架 演 染 出 的 文本 内 容 (Hello，Vuejs!) 。 用 
很 少 的 代码 就 实现 了 泻 染 功能 ， 是 不 是 很 激动 呢 ? 

Vue.js 应 用 看 起 来 似乎 异常 简单 ， 其 实 Vuejs 框架 在 底层 做 了 大 量 工作 。 最 主要 的 一 点 就 是 
数据 和 DOM 已 经 在 内 部 进行 了 绑 定 ， 所 有 数据 更 新 都 是 啊 应 式 的 。 下 面 我 们 通过 浏览 器 的 
JavaScript 控制 台 来 验证 一 下 Vue.js 框架 的 这 个 特性 ， 具 体操 作 步 又 如 图 13.2 所 示 。 

如 图 13.2 中 的 第 头 和 标识 所 示 ， 我 们 首先 在 左边 页 和 面 的 浏览 器 JavaScript 控制 台中 输入 属性 
名 称 “app.message” 对 应 【代码 13-1】 的 第 19 行 代码 ), 然后 输入 新 修改 的 属性 值 (“Hello, King! ") 
后 按 回 车 键 确认 。 接 看 在 右边 页 和 面 中 成 功 显 示 了 同步 更 新 的 文本 内 容 C "Hello, King!”) ， 证 明 
了 Vuejs 框架 的 数据 啊 应 式 更 新 功能 。 感 兴趣 的 读者 可 以 按照 上 和 面 的 步 又 操作 体验 一 下 。 
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} 
)); 


«script» 
«/body» 
</html> 


关于 【代码 13-1】 的 说 明 : 

e 第 04 行 代码 引用 了 Vue.js 框架 所 需 的 库 文件 (vuejs )。 这 里 引用 的 是 开发 版 的 库 文 件 ， 当 然 
也 可 以 引用 压缩 版 的 库 文件 (vue.min.js， 不 过 无 法 使 用 Vue Devtools 调试 功能 )。 

e $ 12-14 行 代 码 通 过 <div> 标 签 元 素 定 义 了 一 个 层 ， 其 中 第 13 行 代码 定义 的 <h3 id="app"> 
标签 元 素 用 于 显示 通过 Vue.js 框架 渔 染 的 文本 内 容 。 

e 第 16~21 行 代码 就 是 Vue.js 的 核心 , 采用 模板 语法 定义 的 声明 式 数据 泻 染 DOM 系统 ， 具 体 
内 容 如 下 : 
> 第 16 行 代码 通过 Vue 构造 器 (注意 使 用 new 关键 字 ) 创建 了 一 个 Vue 对 象 (app). 
> 第 17 行 代码 通过 “el” 参 数 指定 将 要 泻 染 的 DOM (通过 id 属性 )。 
> 第 18~20 行 代码 通过 “data” 参 数 定义 属性 ， 就 是 要 泻 染 的 数据 内 容 。 其 中 ， 在 第 19 行 

代码 中 定义 了 一 个 “message” 属性， 其 属性 值 将 会 泻 染 到 第 13 行 代码 中 对 应 的 
“{{fmessage}}” 人 位置， 特别 注意 这 里 要 将 “message” 放 进 双 大 括号 中 来 使 用 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 13.1 所 示 。 
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>» Q © localhost:63342/ w ee 


JavaScript Vue.js7TZ - Hello 


Hello Vue.js! 


图 13.1 Vuejs 实现 “Hello World" 


如 图 13.1 所 示 ， 页 面 中 成 功 显 示 了 通过 Vue.js 框架 演 染 出 的 文本 内 容 (Hello，Vuejs!) 。 用 
很 少 的 代码 就 实现 了 泻 染 功能 ， 是 不 是 很 激动 呢 ? 

Vue.js 应 用 看 起 来 似乎 异常 简单 ， 其 实 Vuejs 框架 在 底层 做 了 大 量 工作 。 最 主要 的 一 点 就 是 
数据 和 DOM 已 经 在 内 部 进行 了 绑 定 ， 所 有 数据 更 新 都 是 啊 应 式 的 。 下 面 我 们 通过 浏览 器 的 
JavaScript 控制 台 来 验证 一 下 Vue.js 框架 的 这 个 特性 ， 具 体操 作 步 又 如 图 13.2 所 示 。 

如 图 13.2 中 的 第 头 和 标识 所 示 ， 我 们 首先 在 左边 页 和 面 的 浏览 器 JavaScript 控制 台中 输入 属性 
名 称 “app.message” 对 应 【代码 13-1】 的 第 19 行 代码 ), 然后 输入 新 修改 的 属性 值 (“Hello, King! ") 
后 按 回 车 键 确认 。 接 看 在 右边 页 和 面 中 成 功 显 示 了 同步 更 新 的 文本 内 容 C "Hello, King!”) ， 证 明 
了 Vuejs 框架 的 数据 啊 应 式 更 新 功能 。 感 兴趣 的 读者 可 以 按照 上 和 面 的 步 又 操作 体验 一 下 。 
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«nav»JavaScript Vue.js 开发 - Vue 构造 器 </nav> 
12 «/header» 
13 «div id-'id-div-vue'» 
14 «hl»(( title ])])«/h1» 
15 «h3»(( content }}</h3> 
16 oI alli) 1</p> 
17 </div> 
18 «script type-2"text/javascript"» 
19 var app = new Vue(( 
20 el: '£id-div-vue', 
21 data: { 
22 title : "Vue 构造 器 "， 
23 content : "通过 vue 构造 器 创建 应 用 ， 实 现 页 面 泻 染 功 能 ." 
24 ), 
29 methods: { 
26 ali; tunction () 1 
21 reéburn This Title +T : " + this. content; 
28 
29 } 
30 ); 
dI c/serrpby 
32 </body> 
33 «/html» 


关于 【代码 13-2】 的 说 明 : 

o 第 20 行 代 码 通 过 “el” 参 数 指定 将 要 泻 染 的 DOM (id= 'id-div-vue!' ). 

e 第 21~24 行 代码 通过 “data” 参 数 定义 了 一 组 属性 (title 和 content), R8 f XS ea XR 
内 容 。 

e 第 25~29 行 代码 通过 “methods” 参 数 定义 了 一 个 函数 方法 (all )， 通 过 return 语句 返回 了 两 
个 属性 (title 和 content) 内 容 的 组 合 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 有 具体 效果 如 图 13.3 所 示 。 
| jJ JavaScript 全 程 实例 xt 三 im x 
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JavaScript Vue.js 开 发 - Vues 


Vue 构 造 颖 
通过 Vue 构 迁 器 创建 应 用 , 实现 页 面 泻 染 功能 - 


Yue 构造 嚣 : 授 过 Vue 构 造句 创建 应 用 , 实现 页 面 泻 染 功 能 . 


图 13.3 Vue.js 构造 器 
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如 图 13.3 所 示 ， 页 面 中 成 功 显示 了 通过 Vue.js 框架 演 染 出 的 文本 内 容 〈 包 括 通过 函数 all) Pr 
组 合 的 内 容 ) 。 


13.4 Vue .js 构造 器 属性 修改 


我 们 再 回 过 头 来 看 看 【代码 13-2】: Vue 构造 器 中 “data "参数 所 定义 的 属性 其 实 就 是 一 个 JSON 
结构 数据 ， 那 么 是 不 是 可 以 单独 定义 这 个 属性 呢 ? 下 面 先 看 一 个 关于 使 用 Vue 构造 器 “data ”参数 
定义 属性 的 代码 实例 。 


【代码 13-3】( 详 见 源 代码 目录 ch13-vue-js-vue-data.html 文件 ) 


«!DOCTYPE html» 
«html» 
«head» 
«script srcz"js/vue.js"»«/script» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Vue.js 开发 - Vue 构造 器 "data" 参 数 </nav> 
</header> 
«div id-'id-div-vue'» 
«hl»(( title ]])«/h1» 
«h3»(( content }}</h3> 
«p»(( all() ))«/p» 
«/div» 
«script type-"text/javascript"» 
var data = ( 
title : "Vue 构造 器 \"data\ "参数"， 
content : "定义 \"data\" 参 数 属性 的 男 一 种 方法 ." 
} 
var app = new Vuel(t{ 
el: 'fdid-div-vue', 
data: data, 
methods: { 
all : function () ( 


return this.title + " : n+ this.content; 
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31 «/script» 


32 </body> 
33 «/html» 


关于 【代码 13-3】 的 说 明 : 

© 【代码 13-3】 是 在 【代码 13-2】〗 的 基础 上 修改 而 成 的 ， 主 要 就 是 改变 了 “data” 参数 属性 值 

e 第 18~21 行 代码 定义 了 一 个 JSON 结构 数据 对 和 象 (data )。 注 意 ， 这 里 使 用 了 与 Vue 构造 器 

“data” 参 数 同名 的 形式 ， 是 为 了 后 面 的 内 容 做 一 个 铺垫 。 

e 第 24 行 代码 通过 “data” 参 数 定 义 了 属性 (data )， 该 属性 (data) 就 是 第 18 ~ 21 行 代码 定义 

e 第 25~29 行 代码 通过 “methods” 参 数 定义 了 一 个 函数 (all), 特别 之 处 是 仍 使 用 了 属性 (title 
fe content ), 读 者 可 能 会 有 疑问 ,第 24 行 代码 中 并 没有 显 式 地 定义 这 两 个 属性 ( title 和 content ), 
代码 会 不 会 报错 呢 ? 没关系 ， 我 们 通过 下 面 的 测试 结果 看 一 下 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 13.4 所 示 。 
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- — @ | © localhost63342 e 007» 
JavaScript Vue.js 开 发 - Vue 构 造 器 "data "参数 
Vue 构 造 器 "data 参数 


定义 "data "参数 属性 的 另 一 种 方法 . 
Vue 构 造 器 "data "参数 : 定义 "data "参数 属性 的 另 一 种 方法 


13.4 Vue.js 构造 器 "data" 参 数 


如 图 13.4 所 示 ， 页 面 中 成 功 显 示 了 通过 Vue.js 框架 演 染 出 的 文本 内 容 ， 包 括 通过 JSON 结构 
数据 对 象 (data) 定义 的 属性 以 及 函数 方法 (all) 对 属性 Ctitle 和 content? 的 引用 的 代码 都 正确 执 
行 了 。 

为 了 进一步 验证 Vue.js 构造 器 所 定义 的 属性 与 页 面 视图 中 所 泻 染 的 内 容 之 间 完 全 是 啊 应 式 的 ， 
可 以 通过 修改 属性 的 操作 进行 测试 。 下 面 看 一 个 通过 Vue 构造 器 修改 属性 实现 啊 应 式 页 和 面 效 果 的 
代码 实例 。 


【代码 13-4】( 详 见 源 代码 目录 ch13-vue-js-vue-modify-data.html 文件 ) 


«€TDOCTYPE html> 
«html» 
«head» 


«script src-"js/vue.js"»«/script» 


05 
06 
07 
08 
09 
10 
T3 
T2 
t3 
14 
13 
16 
IF 
18 


19 


20 
21 
22 
23 
24 
29 
26 
21 
28 
29 
30 
31 
32 
33 
34 
35 
36 
Ry 
38 
B 
40 
41 
42 
43 
44 
45 
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<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Vue.js 开发 - Vue 构造 器 修改 属性 </nav> 
</header> 


«div id-'id-div-vue'» 
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«hl»(( title ])])«/h1» 
«h3»(( content }}</h3> 
spali allo Hefps 
«/div» 
«div» 
«button id-"id-btn-data" onclick-"on btn data()"> 通 过 data 对 象 修改 属性 
«/button» 
«button id-"id-btn-app" onclick-"on btn app ()"> 通 过 app 对 象 修改 属性 
«/button» 
«/div» 
«script type-"text/javascript"» 


var data = ( 

title : "Vue 构造 器 \"dataN" 人 参数 "， 

content : "定义 \"data\ "参数 属 性 的 男 一 种 方法 ." 
} 
var app = new Vue({ 

el: '£id-div-vue', 

data: data, 

methods: { 

all > runection (i) | 


return this.title + " : "+ this.content; 


)); 
/** 
* func button click - data 
ud À 
function on btn data() { 
if(app.title === data.title) { 
data.title = "Vue 构造 器 修改 属性 " ; 


} 

/** 

* func button click - app 
i 
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function on btn app() { 


if(app.content === data.content) { 


app.content = "通过 app 对 象 修改 content J&TE . " ; 


} 
«/script» 
«/body» 
«/html» 


关于 【代码 13-4】 的 说 明 : 

e@ 【代码 13-4】 是 在 【代码 13-3】 的 基础 上 修改 而 成 的 ， 主 要 就 是 增加 了 两 个 按钮 ， 用 于 实现 
修改 属性 的 操作 。 

e 第 38~42 行 代码 实现 了 第 18 行 代码 所 定义 <button> 按 钮 (id="id-btn-data" ) 的 单 击 onclick 
事件 方法 。 第 39 行 代 码 先 判断 分 别 通过 Vue 对 象 (app) 5 JSON 对 象 (data) 引用 的 属性 

(title) 是 否 恒 等 ， 然 后 第 40 行 代码 通过 JSON 对 象 (data) 修改 属性 (title) 值 。 

e 第 46~ 50 行 代码 与 第 38~ 42 行 代 码 类 似 ， 不 同 之 处 是 第 48 行 代 码 通过 Vue 对 象 (app) 修 

改 属 性 (content) 值 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.5 所 示 。 
在 图 13.5 中 ， 我 们 单 击 页 面 中 的 “通过 data 对 象 修改 属性 ”按钮 ， 页 面 效 果 如 图 13.6 所 示 。 
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JavaScript Vue.js 开 发 - Vue 构 造 器 修改 属性 JavaScript Vue.js 开 发 - Vue 构 造 器 修改 属性 


Vue 构 造 器 "data "参数 
定义 "data" 参 数 属性 的 另 一 种 方法 . 
Vue data" $ : 走 义 "data "参数 属性 的 另 一 种 方法 . Vue 构 造 回 修改 屋 性 : 定 闵 Jdata" 参 数 奈 性 和 的 另 一 种 方法 . 


通过 data 对 象 修改 属性 ”通过 app 对 象 修改 属性 通过 data 对 象 修改 属性 | 通过 app 对 象 修 改 属性 


图 13.5 Vuejs 构造 器 修改 属性 (一) 图 13.6 Vuejs 构造 器 修改 属性 (二 ) 


如 图 13.6 中 的 箭头 所 示 ， 通 过 JSON 对 象 (data) 修改 的 属性 (title) 值 成 功 泻 染 到 页 面 中 了 。 
下 面 我 们 接着 单 击 页 面 中 的 “通过 app 对 象 修改 属性 ”按钮 ， 页 和 面 效 果 如 图 13.7 所 示 。 

如 图 13.7 中 的 箭头 所 示 ， 通 过 Vue 对 象 Capp) 修改 的 属性 (content) 值 同 样 成 功 泻 染 到 页 面 
中 了 。 

读者 可 能 注意 到 了 ， 在 【代码 13-4】 中 分 别 通 过 Vue 对 象 Capp) 和 JSON X12& (data). 修改 
了 两 个 属性 值 (title 和 content) ， 那 么 通过 一 个 对 象 修改 的 属性 值 是 不 是 同步 到 通过 另 一 个 对 象 来 
引用 相同 的 属性 值 呢 ? 答案 是 肯定 的 。 
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Vue 构 造 器 修改 属性 
通过 app 对 象 修改 content 属 性 . 
Vue 构 造 嚣 修改 属性 : 通过 app lH 象 修 改 content 属 性 . 


| [ 通过 app 对 银 修 改 展 性 


13.7 ”Vue.js 构造 器 修改 属性 (三 ) 


为 了 验证 这 个 同步 性 ， 我 们 可 以 在 【代码 13-4】 中 加 入 浏览 器 控制 台 调试 代码 进行 属性 值 的 
同步 输出 ， 具 体 代 码 如 下 。 


【代码 13-5】( 详 见 源 代码 目录 ch13-vue-js-vue-data-sync.html 文件 ) 


<script type="text/javascript"> 

/** 

* func button click - data 

Br 

function on btn data() { 

if(app.title === data.title) { 

data.title = "Vue 构造 器 修改 属性 " ; 
console.log ("修改 data.title JJ: Vue 构造 器 修改 属性 ") ; 
console.log("app.title- " + app.title); 


* func button click - app 
i i 


function on btn app() { 


if(app.content === data.content) { 


app.content = "通过 app 对 象 修改 content 属性 ."; 
console.log ("M app.content 为 : 通过 app 对 象 修改 content 属性 .") ; 
console.log("data.content- " + data.content); 


} 
«/script» 
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关于 【代码 13-5] Bi BH: 
e 【代码 13-5】 是 在 【代码 13-4】 的 基础 上 修改 而 成 的 ， 主 要 就 是 增加 了 第 09 行 代 码 和 第 19 
行 代码 ， 通 过 浏览 器 控制 台 进 行 属性 值 的 同步 输出 验证 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 13.8 和 图 13.9 所 示 。 
如 图 13.8 中 的 第 头 和 标识 所 示 , 通过 JSON 对 象 (data) 修 改 的 属性 (title ) 值 会 同步 到 “app.title” 
属性 中 。 


图 JavaScript 全 程 实例 x |t S 
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Cw O inspector (2) Console D Debugger {} Style Editor 六 $] son X 
B VY riteroutput [Persist Logs 

1 item hidden by filters Reset filters 
16:43:17.487 修改 data,tit1e 为 : Vue 构 造 器 修改 属性  ch13-vue-3s-vue-data-sync.html1:81:13 


16:43:17.487 app.titles Vue 构 造 证 修改 属性 ch13-vue-js-vue-data-sync.htm1:82:13 
» 


图 13.8 Vue.js 构造 器 属性 同步 (一 ) 
IM Ed JavaScript 全 程 实例 x |n e 口 X 
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Vue 构 造 器 修改 属性 


通过 app 对 象 修改 content 屠 性 . 


[RR Ú inspector 加 Console D Debugger () Style Editor X B) * X 
[i Y Filter output [ ]Persist Logs 


1 item hidden by filters Reset filters 


16:43:17.487 修改 data.title 为 : Vue 构 造 器 修改 属性 ch13-vue-js-vue-data-sync.html:81:13 
16:43:17.487 app.title- Vue 构 造 器 修改 属性 Ch13-vue-js-vue-data-sync.htm1:82:13 
16:50:24.334 修改 app.content 为 : 和 通过 app 对 依 修 改 content 属 性 .。 chi3-vue-js-vue-data-sync.html:92:13 
16:58:24.385 data.content- jEidappxisé&PEcontentERit. Ch13-vue-3js-vue-data-sync.html:93:13 


» 
通过 app 对 象 修改 "content" 属 性 值 后 ， 会 同步 到 "data.content" 属 性 


图 13.9 Vue.js 构造 器 属性 同步 (二 ) 
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如 图 13.9 中 的 第 头 和 标识 所 示 ， 通 过 Vue 对 象 Capp) 修改 的 属性 (content) 值 会 同步 到 
“data.content” 属 性 中 。 


13.5 ”Vue.js 构造 器 参数 引用 


在 Vuejs 框架 中 ， 还 提供 了 一 个 “$” 前 缀 符号 来 引用 Vue 构造 器 的 参数 ， 以 便 将 其 与 用 户 日 
定义 的 属性 进行 区 分 。 下 面 看 一 个 关于 使 用 Vue 构造 器 的 “$” 前 级 符号 引用 参数 的 代码 实例 。 


【代码 13-6】( 详 见 源 代码 目录 ch13-vue-js-vue-params.html 文件 ) 


«!DOCTYPE html» 
«html» 
<head> 
«script src-"js/vue.js"»«/script» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Vue.js 开发 - Vue 构造 器 参数 引用 </nav> 
</header> 
«div id='id-div-vue'> 
«hl»(( title ]])«/h1» 
«h3»(( content }}</h3> 
<p>{{ getData() ))«/p» 
«p^»(( getEl1() ))«/p» 
«/div» 
«script type-"text/javascript"» 
var data = ( 
title : "Vue 构造 器 参数 引用 "， 
content : "通过 Vue 构造 器 参数 泻 染 页 面 ." 
} 
var app = new Vue ({ 
el: '#id-div-vue', 
data: data, 
methods: { 
getData : function () { 
if(this.$data === data) { 


return eval(this.$data); 
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32 getEl : function() { 
33 if(this.$el === document.getElementById('id-div-vue')) { 


34 return this.S$el.innerText; 
an 

36 

B ) 

38 )); 

39 «/script» 

40 «/body» 

41 </html> 


关于 【代码 13-6】 的 说 明 : 
e 第 27~31 行 代码 在 “methods” 参 数 中 定义 了 第 一 个 函数 方法 (getData )， 具 体内 容 如 下 : 
> 第 28 行 代码 先 通过 让 条 件 语句 判断 Vue 构造 器 (app) 的 data 参数 ( 注意 需要 通过 “9$” 
符号 引用 ) 与 “data” 属 性 ( 指 代 第 19 ~ 22 行 代码 定义 的 JSON 对 象 ) 是 否 恒 等 ; 
> ”如果 判 断 结 果 为 “true”， 第 29 行 代码 会 直接 返回 data 参数 (this.$data ). 
e 第 32~36 行 代码 在 “methods” 参 数 中 定义 了 第 二 个 函数 方法 (getE1)， 具 体内 容 如 下 : 
> 第 33 行 代码 先 通 过 让 条 件 语句 判断 Vue 构造 器 (Capp) 的 el 参数 (注意 需要 通过 “$?” 4 
号 引用 ) 与 DOM 对 象 («div id=-'id-div-vue> ) 是 否 恒 等 ; 
> 如 果 判 断 结 果 为 “true"”， 第 34 行 代码 会 直接 返回 DOM 对 象 (this.$el ) 的 文本 内 容 


( innerText ). 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 具 体 效 果 如 图 13.10 所 示 。 
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Vue 构 造 器 参数 引用 
通过 Vue 构 造 器 参数 演 染 页 面 . 
( "title": “Vue 构 造 器 参数 引用 ”", "content": "通过 Vue 构 造 器 参数 泻 染 页 面 .”} 


参数 : $data 


(| title }} {{ content jj (( getData() jj {{ getEIO } 


ZxlirgelfJinnerTexts | 


13.10 Vuejs 构造 器 参数 引用 
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13.6 Vue.js 模板 语法 


Vue.js 框架 使 用 了 基于 HTML 的 模板 语法 ， 其 核心 思想 就 是 允许 设计 人 员 使 用 简洁 的 模板 语 
法 以 声明 的 方式 将 数据 演 染 进 DOM 对 象 中 。 同 时 ,借助 Vuejjs 框架 特有 的 啊 应 方式 ， 即 在 应 用 状 
态 发 生 改变 时 能 够 优化 计算 出 重新 演 染 组 件 的 最 小 代价 并 应 用 到 DOM 对 象 中 。 

其 实 ， 在 前 和 面 几 个 代码 实例 中 所 使 用 的 “{{ ”由 ”就 是 最 简单 的 文本 模板 插入 方式 。 当 然 ， 
除了 最 基础 的 文本 插入 方式 之 外 ， 还 有 HTML 代码 插入 、 属 性 插入 、 表 达 式 插入 等 。 在 本 节 中 ， 
我 们 简要 介绍 一 下 关于 Vue.js 框架 模板 语法 的 内 容 。 

首先 ， 我 们 看 一 个 比较 特殊 的 、 关 于 使 用 文本 模板 插入 方式 的 代码 示例 。 


【代码 13-7】( 详 见 源 代码 目录 ch13-vue-js-tmpl-once.html 文件 ) 


<!DOCTYPE html» 
<html> 
<head> 

<script src="js/vue.js"></script> 

<title>JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 

<nav>JavaScript Vue.js 开发 - Vue 模板 语法 (文本 插入 ) </nav> 
</header> 
<div id='id-div-vue'> 

«h3»(( title ))«/h3» 

<p v-text-"content"»«/p» 

<p v-once»í(í( contentOnce }}</p> 
«/div» 
«div» 

«button id-"id-btn-change-data" onclick- 
"on btn change text () "> 答 试 修改 文本 </button> 

«/div» 
«script type-"text/javascript"» 

/** 

* Vue constructor 

d 

var app = new Vue(( 

el: '£id-div-vue', 
data: { 
title : "Vue 模板 语法 (文本 插入 ) "， 
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如 图 13.11 中 的 篆 头 所 示 ， 单 击 “ 艾 试 修改 文本 ”按钮 ， 页 和 面 效 末 如 图 13.12 所 示 。 
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Vue 模 板 语法 (文本 插入 ) 


修改 本 行 的 文本 内 容 完成 ! ~ 一 修改 内 容 后 进行 了 同步 更 新 


尝试 修改 本 行 的 文本 内 容 . 
没有 进行 同步 更 新 || eue 
[Ww Ú Inspector. (2) Console CO Debugger () StyleEditor (7) Performance » MJ = X 


A W Filter output "— [ ]Persist Logs 
两 个 属性 值 已 经 进行 了 同步 更 新 
fiidden by filters Reset filters 


22:06:03.797 data.content is modified : 修改 本 行 的 文本 内 容 完成 ! Ch13-vue-js-tmpl-once.html:71:9 
22:06:03.797 data.contentonce is modified : 修改 本 行 的 文本 内 容 完成 ! ch13-vue-js-tmpl-once.html:73:9 


» | 


13.12. Vue.js 模板 语法 之 文本 插入 〈 二 ) 


如 图 13.12 中 的 第 头 和 标识 所 示 , 单 击 “ 尝 试 修改 文本 ”按钮 后 , 根据 浏览 器 控制 台中 的 输出 ， 
可 以 看 出 两 个 Vue 构造 器 属性 (content 和 contentOnce) 值 已 经 更 改 了 。 同 时 ， 第 14 行 代 码 定义 
的 插入 文本 (content) 进行 了 同步 更 新 , 但 第 15 行 代码 由 于 添加 了 “v-” 前 组 指令 Cv-once) mi 
有 得 到 同步 更 新 。 

Vue.js 框架 模板 不 仅仅 支持 文本 插入 〈v-text) ， 还 支持 直接 插入 HTML 代码 进行 泻 染 ， 有 具体 
方法 是 通过 “v-” 前 级 指令 (v-html) 来 实现 的 。 下 面 我 们 看 一 个 关于 使 用 HTML 代码 模板 插入 方 
式 的 代码 示例 。 


【代码 13-8】( 详 见 源 代码 目录 ch13-vue-js-tmpl-html.html 文件 ) 


<!DOCTYPE html» 

«html» 

«head» 
«script src-"js/vue.js"»«/script» 
«title»JavaScript 全 程 实例 </title> 


</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Vue.js 开发 - Vue 模板 语法 (HTML 插入 ) </nav> 
</header> 
«div id-'id-div-vue' v-html="htmlContent"> 
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«/div» 

«script type-"text/javascript"» 
/** 
* Vue constructor 
Eg 


var app = new Vue({ 


el: 'f£id-div-vue', 
data: 1 
htmlContent : '«h3»Vue 模板 语法 (HTML 插入 ) «/h3»«p» 
使 用 HTML 代码 插入 方式 .</p>' 
} 
}); 
«/script» 
</body> 
</html> 


关于 【代码 13-8】 的 说 明 : 
e 第 12 行 代码 在 <div> 标 签 元 素 内 通过 “v-” 前 组 指令 (v-html ) 定义 了 一 段 HTML 插入 代码 ， 
对 应 第 21 行 代 码 定 义 的 Vue 构造 器 属性 htmlContent 值 。 
e 在 Vue 构造 器 内 的 第 21 行 代码 中 ， 通 过 属性 htmlContent 定义 了 一 段 HTML 代码 (<h3>、 
«p^ ), 
下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.13 所 示 。 
JavaScript 全 程 实例 x |+ E 口 
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Vue 模 板 语 法 (HTML 插 入 ) 


使 用 HTML 代 码 揪 入 方式 . 
通过 插入 HTML 代 码 实 现 


图 13.13 Vuejs 模板 语法 之 HTML 插入 


Vue.js 框架 还 设计 了 一 个 非常 有 意思 的 动态 绑 定 功能 ， 通 过 “v-” 前 级 指令 Cv-bind) 来 实现 。 
举 个 例子 说 明 一 下 ， 我 们 知道 HTML 5 标准 规范 中 为 标签 元 系 新 增 了 一 个 “title” 属 性 ， 可 以 实现 
“ 当 鼠 标 停 留 在 该 元 素 上 时 显示 出 一 个 工具 提示 文本 (Tooltip Text) ”的 效果 。 代 助 “v-” 前 绥 指 
4 (v-bind) ， 可 以 实现 功能 更 强 的 动态 绑 定 效果 。 下 面 看 一 个 具体 的 代码 示例 。 
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【代码 13-9】( 详 见 源 代码 目录 ch13-vue-js-tmpl-bind.html 文件 ) 


<!DOCTYPE html» 
«html» 
«head» 
«script srcz"js/vue.js"»«/script» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Vue.js 开发 - Vue 模板 语法 (动态 绑 定 ) </nav> 
</header> 
«div id-'id-div-vue'» 
<h3 v-text-"title"»«/h3» 
«p v-bind:title-"htmlContent"» JH [R58 3r [8] (通过 鼠标 悬 停 查看 ) «/ p? 
«/div» 
«script type-"text/javascript"» 
/** 
* Vue constructor 
*y 
var app = new Vue(( 
el: '£id-div-vue', 
data: ( 
title : "动态 绑 定 HTML 代码 "， 
htmlContent : new Date().toLocaleString() 
} 
)); 
«/script» 
</body> 
</html> 


关于 【代码 13-9】 的 说 明 : 

e 第 14 行 代码 在 <p> 标 签 元 素 内 通过 “v-” 前 缓 指令 (v-bind) RET “title” 属 性 (代码 形式 
为 v-bind:title )， 绑 定 的 内 容 是 第 24 行 代码 定义 的 Vue 构造 器 属性 htmlContent 值 。 

e 在 Vue 构造 器 内 的 第 24 行 代 码 中 ， 通 过 属性 htmlContent 定义 了 一 段 JavaScript 代码 (通过 
Date 对 象 获取 了 当前 时 间 ). 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.14 所 示 。 
如 图 13.14 中 的 箭头 所 示 ， 当 我 们 将 鼠标 悬 停 在 提示 文本 上 时 会 弹出 一 个 工具 提示 文本 
(Tooltip Text) ， 显 示 当 前 时 间 。 
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JavaScript 全 程 实例 X 


Q! © localhost.63342, e 23 » 


JavaScript Vue.js 开 发 - Vue 模 板 语法 (动态 绑 定 ) 


动态 线 定 HTML 代 和 三 


页 和 面 更 新 时 间 ( 遂 过 鼠标 县 停 查 看 ) 


2/15/2019, 1:58:09 PM 


13.14 Vue.js 模板 语法 之 动态 绑 定 


13.7 Vue.js 条 件 循环 语句 


Vue.js 框 娘 设计 的 “v-” 前 绥 指 令 非 常 串 大 ， 提 供 了 带 有 逻辑 控制 功能 的 条 件 语句 〈v-if) 和 
循环 语句 Cv-for) 。 比 如 ， 使 用 Vue 条 件 语句 就 可 以 很 方便 地 实现 “显示 或 隐藏 ”元 素 内 容 的 功 
能 。 在 传统 的 JavaScript 方式 下 ， 需 要 编写 相对 复杂 的 切换 CSS. 样式 的 代码 来 实现 。 

首先 ， 我 们 看 一 个 使 用 Vue 条 件 语 句 控制 页 面 元 素 内 容 切换 “显示 /隐藏 ”效果 的 代码 实例 。 


【代码 13-10】( 详 见 源 代码 目录 ch13-vue-js-v-if.html 文件 ) 


«!DOCTYPE html» 

«html» 

«head» 
«script src-"js/vue.js"»«/script» 
«title»JavaScript 全 程 实例 </tit1le> 

</head> 

«body» 

«1-- 添加 文档 主体 内 容 --> 


<header> 


«nav»JavaScript Vue.js 开发 - Vue 条 件 语 句 </nav> 
</header> 


«div id-'id-div-vue'» 
«h1»(( title )]«/h1» 
<p v-if-"show"»(( content }}</p> 
<p v-if-"hide"»(( content }}</p> 
«/div» 
«script type-"text/javascript"» 
var app = new Vue(( 


el: '£id-div-vue', 
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data: { 
title: "Vue 条 件 语 句 "， 
content: "XÆ: 通过 vue 条 件 语句 可 以 实现 可 见 /隐藏 效果 ."， 
show: true, 
hide: false 


} 
27 </script> 
28 «/body» 
29 «/html» 


关于 【代码 13-10] Bii BH: 


o 第 14 行 和 第 15 行 代 码 分 别 在 <p> 标 签 元 素 内 通过 “v-” 前 缓 指令 (vif) 定义 了 一 个 条 件 语 
人 外， 分 别 对 应 第 23 行 和 第 24 行 代码 定义 的 Vue 构造 器 属性 (show:true 和 hide:false ) 值 。 

e 在 Vue 构造 器 内 ， 第 23 行 代码 中 的 属性 (show) ZLA true ( 真 ) 值 ， 而 第 24 行 代码 中 的 
属性 (hide) ZLA false ( 假 ) 值 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.15 所 示 。 
| Eg JavaScript 全 程 实例 X | 十 一 口 
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Vue 条 件 语句 


文本 : 通过 Vue 条 件 语句 可 以 实现 可 见 /隐藏 效果 . 
此 处 的 内 容 被 隐藏 了 m vitfalse 


13.15 Vuejs 条 件 语句 
如 图 13.15 中 的 第 头 和 标识 所 示 ， 通 过 Vue 条 件 语句 〈v-iftrue) 插入 的 段落 内 容 可 以 显示 出 
来 ， 而 通过 Vue 条 件 语 句 (v-if:false) 插入 的 段落 内 容 则 被 隐藏 了 。 
下 面 我 们 看 一 个 使 用 Vue 循环 语句 在 页 面 中 控制 输出 列表 的 代码 实例 。 


【代码 13-11】( 详 见 源 代码 目录 ch13-vue-js-v-for.html 文件 ) 


<!DOCTYPE html» 
«html» 
«head» 


<script src-"js/vue.js"»«/script» 
«title»JavaScript 全 程 实例 </title> 
</head> 
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07 <body> 

08 «!-- 添加 文档 主体 内 容 --> 

09 «header» 

10 «nav»JavaScript Vue.js 开发 - Vue 循环 语句 </nav> 
11 </header> 

12 «div id-'id-div-vue'» 

153 «h1»(( title ))«/h1» 

14 «ol» 

15 «li v-for-"li in arrLi"» 
16 (( li.text ]) 

17 «/1li» 

18 </ol> 

19 </div> 

20 <script type="text/javascript"> 
21 var app = new Vue({ 

22 el: '#id-div-vue', 

之 了 data: { 

24 title: "循环 语句 "， 

25 arrbi: [| 

26 (text: 'JavaScript'], 
2J (text: 'React'}, 
28 (text: 'Vue.js'] 
29 

30 } 

31 )); 

32 «/script» 

33 «/body» 

34 «/html» 


关于 【代码 13-11】 的 说 明 : 
e 第 14~ 18 行 代码 通过 <ol><l 户 标签 元 素 定义 了 一 个 列表 ， 有 具体 说 明 如 下 : 
> 第 15 行 代码 的 <li> 标 签 元 素 内 通过 “Vv-” 前 组 指令 ( v-for ) 定 义 了 一 个 循环 语句 (1iin arrLi ). 
相信 读者 发 现 了 ， 这 里 很 像 传 统 的 “for...in...” 循 环 语句 。 确 实 如 此 ,， “li” 本 身 是 一 个 
自 变量 ，“arrLi” 对 应 第 25 ~ 29 行 代码 定义 的 Vue 构造 器 属性 ( arrLi ) 数组 值 。 
> 第 16 行 代码 通过 自 变量 1i (“arrLi” 数 组 项 ) 引用 “text” 属 性， 实现 列表 项 的 输出 。 
e 在 Vue 构造 器 内 ， 第 25~29 行 代码 定义 的 属性 (arrLi) 是 一 个 数组 结构 ， 这 个 数组 其 实 就 
是 一 个 JSON 结构 的 对 象 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.16 所 示 。 
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JavaScript 全 程 实例 


>» CQ © localhost63347 


JavaScript Vue.js 开 发 - Vue 循 环 语句 


循环 语句 
1. Javascript 
2. React 


3. Vue.js 


图 13.16 Vuejs 循环 语句 


13.8 ”Vue.js 事件 监听 处 理 


Vue.js 是 一 个 基于 JavaScript 实现 的 高 性 能 框架 ， 事 件 监 昕 处 理 功 能 是 必须 具备 的 。Vue.js 事 
件 监听 是 通过 “v-” 前 级 指令 C-on) 实现 的 ， 使 用 “on” 是 继承 日 JavaScript 事件 方法 的 名 称 〈 比 
如 onclick、onchange、onfocus 等 ) 。 

在 前 文 的 Vue 条 件 语 句 中 ， 我 们 实现 了 “显示 /隐藏 ”内 容 的 效果 。 下 面 我 们 在 此 基础 上 实现 
一 个 通过 用 户 操作 切换 内 容 “ 显 示 / 隐 颖 ”效果 的 实例 。 


【代码 13-12】( 详 见 源 代码 目录 ch13-vue-js-v-on.html 文件 ) 


<!DOCTYPE html» 
«html» 
<head> 
«script src-"js/vue.js"»«/script» 
«title»JavaScript 全 程 实例 </title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>JavaScript Vue.js 开发 - Vue 事件 监听 处 理 </nav> 
</header> 
«div id-'id-div-vue'» 
<h1>{{ title }}</h1> 


<p v-if="show" v-html="contentShow"></p><br> 

<p v-if="hide" v-html="contentHide"></p><br> 

«button v-on:click="onShowHide"> 切 换 “ 显 示 / 隐 藏 ” 效 果 </button> 
«/div» 
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18 «script type-"text/javascript"» 


19 [E 

20 * Vue constructor 

21 xi 

22 var app = new Vue(( 

zd el: '#id-div-vue', 

24 data: | 

25 title: "Vue 条 件 语句 "， 

26 contentShow: "通过 Vue 条 件 语句 可 以 实现 <b> 可 见 </b> 效 果 ."， 
27 contentHide: "通过 vue 条 件 语句 可 以 实现 <b> 隐 藏 </b> 效 果 ."， 
28 show: true, 

29 hide: false 

30 ), 

31 methods: { 

32 iia 

33 * func - change show/hide effect 
34 a i 

35 onShowHide: function () ( 

36 if(this.show) | 

3! console.log(this.show); 
38 this.show = false; 

39 this.hide - true; 

40 } else ( 

41 console.log(this.show); 
42 this.show = true; 

43 this.hide - false; 

44 } 

45 } 

46 

41 )); 

48 </script> 

49 </body> 

50 «/html» 


关于 【代码 13-12】 的 说 明 : 

e 在 第 14 行 和 第 15 行 代码 中 ,分别 在 <p> 标 签 元 素 内 通过 “Vv-” 前 组 指令 (Vv-if) 定义 了 一 个 
条 件 语 句 ， 分 别 对 应 第 28 行 和 第 29 行 代码 定义 的 Vue 构造 器 属性 ( show:true 和 hide:false ) 
值 ; 同时 ， 在 <p> 标 签 元 素 内 还 通过 “v-” 前 组 指令 (v-html) 定义 了 一 段 HTML 插入 代码 ， 
分 别 对 应 第 26 行 和 第 27 行 代码 定义 的 Vue 构造 器 属性 ( contentShow 和 contentHide ) 值 ， 
我 们 的 目标 就 是 通过 用 户 操作 来 切换 显示 这 两 个 段落 的 内 容 。 

e 在 Vue 构 造 器 内 ， 第 28 行 代码 中 的 属性 (show) 定义 为 true ( 真 ) 值 ， 而 第 29 行 代码 中 的 
属性 (hide) 定义 为 false (4& ) 值 。 
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o 在 第 16 行 代码 中 ， 在 <button> 标 签 元 素 内 通过 “Vv-” 前 级 指令 (Vv-on:click ) 定义 了 一 个 单 击 
事件 处 理 方法 (onShowHide ). 
e 在 第 31~46 行 代码 定义 的 “methods” 参 数 中 ， 第 35~ 45 行 代 码 实 现 了 单 击 事件 处 理 方法 
(onShowHide )。 第 36-44 行 代码 通过 让 条 件 语句 切换 定义 属性 (show ) 和 属性 (hide) 的 
Ar MAE (true 或 false )， 从 而 实现 响应 式 的 内 容 “ 显 示 / 隐 藏 ”切换 效果 。 


下 面 使 用 Firefox 浏览 器 运行 测试 该 HTML 网 页 ， 初 始 效果 如 图 13.17 所 示 。 


JavaScript 全 程 实 例 x Bm = L] 


Q' © localhost.63342/, -J >» 


JavaScript Vue.js 开 发 - Vue 事 件 监听 处 理 


Vue 条 件 语句 


通过 Vue 条 件 语句 可 以 实现 可 见效 果 . 


13.17 Vue.js 事件 监听 实现 “显示 /隐藏 ”切换 效果 (一) 


如 图 13.17 中 的 箭头 和 标识 所 示 ， 页 面 初始 状态 显示 的 是 “可 见 ” 效 果 的 文本 内 容 。 下 面 ， 我 
们 单 击 一 次 “切换 "显示 /隐藏 "效果 ”按钮 ， 页 面 更 新 效果 如 图 13.18 所 示 。 


JavaScript 全 程 实例 x IE x 口 


G © localhost:63342/ ey» 


JavaScript Vue.js 开 发 - Vue 事 件 监 听 处 


Vue 条 件 语 句 


通过 Vue 条 件 语 句 可 以 实现 隐藏 效果 . 


切换 "显示 /隐藏 ' 效 果 


13.18 Vue.js 事件 监听 实现 “显示 /隐藏 ”切换 效果 (二 ) 
如 图 13.18 中 的 熏 头 和 标识 所 示 ， 此 时 页 面 状 态 切换 到 “隐藏 ”效果 的 文本 内 容 。 读 者 可 以 符 
试 连续 单 击 “切换 "显示 /隐藏 "效果 ”按钮 ， 测 试 一 下 Vue.js 框 染 特有 的 啊 应 式 的 内 容 演 染 切 换 
效果 。 


